修改动画

cokingCoal/humanResources.html

@@ -42,7 +42,8 @@
                             <div class="item_content_4 flex_column">
                                 <div class="content_4_top flex_column">
                                     <div class="content_4_title flex">
-                                        <div :class="item.flag?'btn_on':'btn_off'" v-for="(item,index) in leftList" @click="handleChangeType(false,index)">{{ item.name }}</div>
+                                        <div :class="item.flag?'btn_on':'btn_off'" v-for="(item,index) in leftList"
+                                            @click="handleChangeType(false,index)">{{ item.name }}</div>
                                         <!-- <div class="btn_off">招聘岗位种类</div> -->
                                     </div>
                                     <div class="content_4_time flex">
@@ -65,7 +66,8 @@
                                 <div class="content_4_btm">
                                     <div v-if="!leftFlag" class="echarts_dom" ref="leftChange"></div>
 
-                                    <dv-scroll-board v-if="leftFlag" :config="config2" style="width: 100%; height: 100%" />
+                                    <dv-scroll-board v-if="leftFlag" :config="config2"
+                                        style="width: 100%; height: 100%" />
                                 </div>
                             </div>
                         </div>
@@ -118,16 +120,17 @@
                         </div>
                     </div>
                 </div>
-                <div class="left_btm" >
+                <div class="left_btm">
                     <div :class="treeList[1].flag?'title_yellow':'title'">Ⅱ.简历投递</div>
                     <div class="main flex_sp" style="position: relative;">
                         <div class="main_item">
                             <dv-scroll-board :config="configMark" style="width: 100%; height: 100%" />
                         </div>
-                        <div class="main_item" >
+                        <div class="main_item">
                             <div class="echarts_dom" v-if="downholeFlag" ref="vita"></div>
-                            
-                            <dv-scroll-board v-if="!downholeFlag" :config="typeList" style="width: 100%; height: 100%" />
+
+                            <dv-scroll-board v-if="!downholeFlag" :config="typeList"
+                                style="width: 100%; height: 100%" />
 
                         </div>
                         <div class="echarts_icon" @click="hanleIcon()">
@@ -195,7 +198,8 @@
                         <div class="main_item flex_column"
                             style="background: none;overflow: hidden;padding-bottom: 15px;">
                             <div class="main_item_btn flex">
-                                <div :class="item.flag?'btn_on':'btn_off'" v-for="(item,index) in rightList" @click="handleChangeType(true,index)">{{ item.name }}</div>
+                                <div :class="item.flag?'btn_on':'btn_off'" v-for="(item,index) in rightList"
+                                    @click="handleChangeType(true,index)">{{ item.name }}</div>
                                 <!-- <div class="btn_off" @click="handleChangeType(true,2)">累计数</div> -->
                             </div>
                             <div class="main_item_main_bg">
@@ -355,7 +359,59 @@
             </div>
             <div class="echarts_dom" ref="pageBtm"></div>
         </div>
+        <div class="svg_box">
+            <div class="svg_item_s">
+                <svg class="svg">
+                    <defs>
+                        <linearGradient id="gradient-test">
+                            <stop offset="0%" stop-color="#6fb6e2" />
+                            <stop offset="50%" stop-color="#70eef0" />
+                            <stop offset="100%" stop-color="#00fac8" />
+                        </linearGradient>
+                    </defs>
+                    <circle cx="380" cy="350" r="370" stroke-width="10px" stroke="url(#gradient-test)" fill="none"
+                        opacity="1">
+                        <animateTransform attributeName="transform" repeatCount="indefinite" type="rotate"
+                            from="360 380 350" to="0 380 350" dur="3" />
+                    </circle>
+
+                </svg>
+            </div>
+            <div class="svg_item_shu">
+                <svg class="svg">
+                    <defs>
+                        <linearGradient id="gradient-test">
+                            <stop offset="0%" stop-color="#6fb6e2" />
+                            <stop offset="50%" stop-color="#70eef0" />
+                            <stop offset="100%" stop-color="#00fac8" />
+                        </linearGradient>
+                    </defs>
+                    <circle cx="380" cy="350" r="370" stroke-width="25px" stroke="#70eef0" fill="none"
+                        stroke-dasharray="6 40">
+                        <animateTransform attributeName="transform" repeatCount="indefinite" type="rotate"
+                            from="0 380 350" to="360 380 350" dur="50" />
+                    </circle>
 
+                </svg>
+            </div>
+            <div class="svg_item">
+                <svg class="svg">
+                    <defs>
+                        <linearGradient id="gradient-test">
+                            <stop offset="0%" stop-color="#6fb6e2" />
+                            <stop offset="50%" stop-color="#70eef0" />
+                            <stop offset="100%" stop-color="#00fac8" />
+                        </linearGradient>
+                    </defs>
+                    <circle cx="380" cy="350" r="370" stroke-width="10px" stroke="url(#gradient-test)" fill="none"
+                        opacity="1">
+                        <animateTransform attributeName="transform" repeatCount="indefinite" type="rotate"
+                            from="0 380 350" to="360 380 350" dur="3" />
+                    </circle>
+
+                </svg>
+            </div>
+        </div>
         <div class="mark_box" v-if="showMark" @click="handleMark()">
             <div class="mark_select_box" :style="markStyle" v-if="showSelect">
                 <div class="mark_select_options" v-for="(item,index) in newList" ::key="index"
@@ -363,7 +419,7 @@
             </div>
             <div class="mark_month_box" v-if="showMonth">
                 <div class="mark_select_options" v-for="(item,index) in monthList" :key="index"
-                @click="handleMonthOption(item)">{{ item }}月</div>
+                    @click="handleMonthOption(item)">{{ item }}月</div>
             </div>
         </div>
 

cokingCoal/styles/humanResources.css

@@ -978,6 +978,51 @@ li {
     z-index: 9999;
 }
 
+.svg_box{
+    width: 40%;
+    height: 500px;
+    position: absolute;
+    left: 50%;
+    bottom: 11%;
+    transform: translateX(-15%);
+    transform-origin: center bottom;
+    transform-style: preserve-3d;
+}
+
+.svg_item{
+    width: 800px;
+    height: 800px;
+    transform-origin: center top;
+    transform: rotateX(81deg) scale(2.83);
+    position: absolute;
+    bottom: -54%;
+}
+
+.svg_item_s{
+    width: 800px;
+    height: 800px;
+    transform-origin: center top;
+    transform: rotateX(81deg) scale(2.01) translateX(-1.2%);
+    position: absolute;
+    bottom: -54%;
+}
+
+.svg_item_shu{
+   width: 800px;
+    height: 800px;
+    transform-origin: center top;
+    transform: rotateX(81deg) scale(2.15) translateX(-1%);
+    position: absolute;
+    bottom: -54%; 
+}
+
+.svg{
+    width: 100%;
+    height: 100%;
+
+}
+
+
 ::-webkit-scrollbar {
 
     display: none;