feat:操作指引区域样式修改

src/views/Home/components/Operating.vue

@@ -5,29 +5,36 @@
       <p class="desc">创建、编辑、投放、分析，让洞察更简单</p>
     </div>
     <div>
-      <el-carousel :interval="5000" arrow="always">
+      <el-carousel :autoplay="true" :interval="5000" arrow="always" indicator-position="none">
         <el-carousel-item v-for="(item,index) in operatingList" :key="item" >
           <div class="flex" style="justify-content: space-around">
             <div >
               <div class="flex-start operating-item" >
-                <p  :style="{'color':item.btnColor}">
+                <p class="progress" :style="{'color':item.btnColor}">
                   <span class="fs-36">
                     {{index+1}}
                   </span>
                   <span class="fs-34">
-                    / {{operatingList.length}}
+                    /
-                  </span></p>
+                  </span>
-                <div class="">
+                  <span>
+                    {{operatingList.length}}
+                  </span>
+                </p>
+                <div class="info">
                   <p>{{item.title}}</p>
                   <p>{{item.desc}}</p>
                 </div>
               </div>
-              <ul>
+              <ul class="desc-item">
-                <li v-for="(tips,index) in item.descList" :key="index">
+                <li class="flex" v-for="(tips,index) in item.descList" :key="index">
+                  <p class="block"></p>
                   {{tips}}
+                  <span class="fs-12 tag" v-if="index === 0 && item.isShowTag">
+                    新功能
+                  </span>
                 </li>
               </ul>
-              <el-button type="primary" @click="toSurveyInfo">立即体验</el-button>
             </div>
             <div>
               <img src="@/assets/logic-edit.png" alt="" style="height: 300px">
@@ -50,29 +57,31 @@ const operatingList = ref([{
   title: '多种方式',
   desc:'快速创建问卷',
   descList:[
-      '一句话AI生成问卷，高效智能(新功能)','20+专业场景模板，快速创建','WORD模板上传，一键导入','空白创建编辑，灵活简单'
+      '一句话AI生成问卷，高效智能','20+专业场景模板，快速创建','WORD模板上传，一键导入','空白创建编辑，灵活简单'
   ],
-  btnColor:'green'
+  btnColor:'green',
+  isShowTag:true
 },
   {
-    title: '多种方式',
+    title: '编辑质检',
-    desc:'快速创建问卷',
+    desc:'设计快速搞定',
     descList:[
-      '一句话AI生成问卷，高效智能(新功能)','20+专业场景模板，快速创建','WORD模板上传，一键导入','空白创建编辑，灵活简单'
+      '30+专业题型及模型题组，多种逻辑适配各类场景','AI多维度问卷质检，快速识别问题提供建议',
+      '多种主题、九宫格抽奖， 自定义问卷风格', '多人协作编辑，便捷协同快捷高效'
     ],
     btnColor:'green'
   },{
-    title: '多种方式',
+    title: '精准触达',
-    desc:'快速创建问卷',
+    desc:'投放轻松高效',
     descList:[
-      '一句话AI生成问卷，高效智能(新功能)','20+专业场景模板，快速创建','WORD模板上传，一键导入','空白创建编辑，灵活简单'
+      '多元样本资源精准圈选，在线一站式投放','标准链接及二维码，问卷快捷私发群发','自定义链接参数，记录多渠道样本来源','回收进度、配额进度在线实时追踪'
     ],
     btnColor:'green'
   },{
-    title: '多种方式',
+    title: '数据分析',
-    desc:'快速创建问卷',
+    desc:'多种维度洞察',
     descList:[
-      '一句话AI生成问卷，高效智能(新功能)','20+专业场景模板，快速创建','WORD模板上传，一键导入','空白创建编辑，灵活简单'
+      'AI数据清洗，无效数据在线剔除','AI智能总结，调研结论一键洞察','专业模型看板，直达分析结论','个性化交叉分析，多维数据挖掘'
     ],
     btnColor:'green'
   }])
@@ -112,13 +121,62 @@ li{
   margin-top: 20px;
   &>div:first-child {
     text-align: center;
-
   }
   .title{
     margin-bottom: 5px;
   }
+  .desc{
+    color: #7F7F81;
+  }
   .operating-item{
-
+    .progress{
+      letter-spacing: -4px;
+      & :nth-child(1){
+        color: #70B937;
+        font-size: 45px;
+        font-weight: 400;
+      }
+      & :nth-child(2){
+        color: #000;
+        font-size: 45px;
+      }
+      & :nth-child(3){
+        color: #000;
+        font-size: 24px;
+      }
+    }
+    .info{
+      font-size: 24px;
+      font-weight: bold;
+      line-height: 26px;
+      margin-left: 10px;
+    }
+  }
+  .desc-item{
+    font-weight: bold;
+    font-size: 12px;
+    color: #000;
+    line-height: 17px;
+    li{
+      margin: 10px 0;
+      justify-content: flex-start;
+      .block{
+        width: 8px;
+        height: 8px;
+        background-color: #000;
+        margin-right: 10px;
+      }
+      .tag{
+        font-weight: 500;
+        font-size: 13px;
+        color: #2F5EF2;
+        background-color: #E2E8FA;
+        border: 1px solid #2F5EF2;
+        padding: 1px 5px;
+        border-radius: 6px;
+        margin-left: 4px
+      }
+    }
   }
 }