案例专家添加图片

src/views/portal/case/Index.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="case-list-content">
     <div style="margin-bottom:30px" class="case-banner">
-      <portal-header @type1="handleType" :type="queryCondition" current="case" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
+      <portal-header @type1="handleType" :type="queryCondition" current="case" textColor="#fff" @emitInput="emitInput"
+        @showClass="showClass"></portal-header>
     </div>
     <div class="xcontent2">
       <!-- 新增的案例分类 -->
@@ -115,7 +116,8 @@
                       <div style="padding:0;" :class="speciAll ? 'fieldactive' : ''" @click="majorall()">全部</div>
                       <div class="fieldbox">
                         <div :class="item.fielclass ? 'fieldactive' : ''" @click="fieldmajor(item)"
-                          v-for="(item, idx) in speciData" :key="'d' + idx">{{ item.name }}({{ item.explanation }})</div>
+                          v-for="(item, idx) in speciData" :key="'d' + idx">{{ item.name }}({{ item.explanation }})
+                        </div>
                       </div>
                     </div>
                     <!-- <el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
@@ -156,15 +158,19 @@
               <div v-if="caseTimeShow" class="pub_time" @click="searchTime">
                 <div class="text">发布时间</div>
                 <div class="triangle">
-                  <div :style="{borderBottomColor:pubTimeNum===2?'#387DF7':'#DCDFE6'}" class="up-triangle"></div>
+                  <div :style="{ borderBottomColor: pubTimeNum === 2 ? '#387DF7' : '#DCDFE6' }" class="up-triangle">
-                  <div :style="{borderTopColor:pubTimeNum===1?'#387DF7':'#DCDFE6'}" class="down-triangle"></div>
+                  </div>
+                  <div :style="{ borderTopColor: pubTimeNum === 1 ? '#387DF7' : '#DCDFE6' }" class="down-triangle">
+                  </div>
                 </div>
               </div>
               <div v-if="caseTimeShow" class="pub_time" @click="searchPageView">
                 <div class="text">浏览量</div>
                 <div class="triangle">
-                  <div :style="{borderBottomColor:pageViewNum===2?'#387DF7':'#DCDFE6'}" class="up-triangle"></div>
+                  <div :style="{ borderBottomColor: pageViewNum === 2 ? '#387DF7' : '#DCDFE6' }" class="up-triangle">
-                  <div :style="{borderTopColor:pageViewNum===1?'#387DF7':'#DCDFE6'}" class="down-triangle"></div>
+                  </div>
+                  <div :style="{ borderTopColor: pageViewNum === 1 ? '#387DF7' : '#DCDFE6' }" class="down-triangle">
+                  </div>
                 </div>
               </div>
               <el-select v-if="caseTimeShow" @change="yearsChange" v-model="years" multiple collapse-tags
@@ -172,7 +178,8 @@
                 <el-option v-for="item in caseYears" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
-              <div :class="queryCondition.type == 'collect' ? 'collect_active': 'collect'" @click="searchexcellent('collect')">
+              <div :class="queryCondition.type == 'collect' ? 'collect_active' : 'collect'"
+                @click="searchexcellent('collect')">
                 <div class="png"></div>
                 <div class="text">收藏案例</div>
               </div>
@@ -189,7 +196,8 @@
             </div>
           </div>
           <div class="data-content">
-            <div v-for="item in this.caseList.list" :key="isTimeData?item.browsingHistoryId : item.id" class="case-list">
+            <div v-for="item in this.caseList.list" :key="isTimeData ? item.browsingHistoryId : item.id"
+              class="case-list">
               <div class="case-info">
                 <div class="case-info-cont">
                   <!-- <router-link :to="'/case/detail?id=' + item.id"> -->
@@ -201,16 +209,21 @@
                     <div class="case-info-title">
                       <div class="case-titdiv">
                         <div class="case-tittext">
-                          <span :style="{maxWidth:item.excellentTag&&item.viewRankTags.length != 0?'400px':item.viewRankTags.length != 0?'500px':''}" class="title-line-ellipsis" :title="item.title">{{ item.title || item.contentInfo }}</span>
+                          <span
+                            :style="{ maxWidth: item.excellentTag && item.viewRankTags.length != 0 ? '400px' : item.viewRankTags.length != 0 ? '500px' : '' }"
+                            class="title-line-ellipsis" :title="item.title">{{ item.title || item.contentInfo }}</span>
                         </div>
                         <div class="case-activeText">
                           <!-- <span v-if="item.breCommend" class="comWords"
                             style="background-color:rgba(232, 139, 72);">荐</span>
                           <span v-if="item.excellent" class="comWords" style="background-color:red;">最佳</span> -->
-                          <span @click.stop="()=>{}" v-if="item.excellentTag" class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 4px 10px;cursor: auto;">
+                          <span @click.stop="() => { }" v-if="item.excellentTag" class="comWords"
+                            style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 4px 10px;cursor: auto;">
                             {{ item.excellentTag }}
                           </span>
-                          <span @click.stop="toExcellent(tag)" v-if="item.viewRankTags.length != 0" v-for="tag in item.viewRankTags" class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 4px 10px;">
+                          <span @click.stop="toExcellent(tag)" v-if="item.viewRankTags.length != 0"
+                            v-for="tag in item.viewRankTags" class="comWords"
+                            style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 4px 10px;">
                             {{ tag.tagName }}
                           </span>
                         </div>
@@ -225,8 +238,9 @@
                   <!-- </router-link> -->
                   <div v-if="!item.id" style="height:25px;padding-top:14px "></div>
                   <div v-if="item.id" style="height:58px;padding-top:14px ">
-                    <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo"
+                    <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name"
-                      :sex="item.authorInfo.sex" :authorTags="item.authorTags" :aid="item.authorInfo.aid">
+                      :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex" :authorTags="item.authorTags"
+                      :aid="item.authorInfo.aid">
                       <template>
                         <div v-if="item.breCommend"
                           style="padding-top: 6px;flex: 1;display: flex;justify-content: flex-end;color: #999;font-size: 12px;">
@@ -253,7 +267,8 @@
                     </div>
                   </div>
                   <!-- </router-link> -->
-                  <div v-if="item.id" class="case-info-summary two-line-ellipsis" @click="toCaseDetail(item.id, item.refId)">
+                  <div v-if="item.id" class="case-info-summary two-line-ellipsis"
+                    @click="toCaseDetail(item.id, item.refId)">
                     {{ item.summary }}
                     <!-- <router-link :to="'/case/detail?id='+item.id"> -->
                     <!-- {{displayAll(item)}} -->
@@ -264,7 +279,8 @@
                   </div>
                   <div v-if="item.id" style="display: flex;justify-content: flex-end;">
                     <div style="margin:8px 0;">
-                      <interactBar @deleteFavorite="deleteFavorite" :type="3" :data="item" :comments="false" :shares="true"></interactBar>
+                      <interactBar @deleteFavorite="deleteFavorite" :type="3" :data="item" :comments="false"
+                        :shares="true"></interactBar>
                     </div>
                   </div>
                 </div>
@@ -295,8 +311,8 @@
 
         <div id="fixd-box">
           <div class="AI-case">
-            <el-button type="success" @click="getAICase" plain>立即咨询</el-button>
+            <img src="../../../../public/images/case-logo.png" alt="">
-          <!-- <img src="../../../assets/images/course/courseTag.png" alt=""> -->
+            <span @click="getAICase"></span>
           </div>
           <router-link class="the_charts" to="/case/charts">
             <div class="text">排行榜</div>
@@ -377,7 +393,8 @@
                 </li>
               </ul>
             </div>
-            <div v-if="recommendRank.length > 0" class="portal-ranking ranking-bg2" style="margin-top:20px;padding: 20px 15px;max-height: 222px;">
+            <div v-if="recommendRank.length > 0" class="portal-ranking ranking-bg2"
+              style="margin-top:20px;padding: 20px 15px;max-height: 222px;">
               <p class="ranking-title">推荐榜</p>
               <ul class="ranking-data">
                 <li v-for="(item, index) in recommendRank" :key="index" class="title-line-ellipsis"
@@ -1891,9 +1908,11 @@ export default {
   font-size: 14px;
   color: rgba(51, 51, 51, 0.9);
 }
+
 .el-icon--right {
   margin-left: 14px !important;
 }
+
 .the_charts {
   position: relative;
   display: flex;
@@ -1906,10 +1925,12 @@ export default {
   height: 47px;
   background: #DDEDFF;
   border-radius: 8px;
+
   .text {
     font-size: 17px;
     color: #387DF7;
   }
+
   .icon {
     position: absolute;
     font-size: 17px;
@@ -1920,6 +1941,7 @@ export default {
   }
 
 }
+
 // 课程分类
 .course-title-style {
   position: relative;
@@ -1991,6 +2013,7 @@ export default {
   }
 
 }
+
 .u-class {
   ::v-deep .el-dialog {
     border-radius: 15px;
@@ -2121,6 +2144,7 @@ export default {
           border: 0.96px solid rgba(140, 105, 242, 1);
           box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
         }
+
         .text_msg {
           margin: 43px 0 0 222px;
           font-size: 14px;
@@ -2504,18 +2528,22 @@ export default {
     background-color: #fff;
     display: flex;
     align-items: center;
+
     // margin-bottom: ;
     .pub_time {
       display: flex;
       margin-right: 25px;
       align-items: center;
       cursor: pointer;
+
       .text {
         font-size: 14px;
         color: #333333;
       }
+
       .triangle {
         margin-left: 5px;
+
         .up-triangle {
           width: 0;
           height: 0;
@@ -2524,6 +2552,7 @@ export default {
           border-bottom: 6px solid #DCDFE6;
           margin-bottom: 2px;
         }
+
         .down-triangle {
           width: 0;
           height: 0;
@@ -2533,6 +2562,7 @@ export default {
         }
       }
     }
+
     .time {
       position: relative;
       display: flex;
@@ -2542,17 +2572,21 @@ export default {
       width: 116px;
       height: 38px;
       border-radius: 4px;
+
       // background: #04243C;
       &:hover {
         // background: #387DF7;
         border: 1px solid #387DF7;
+
         .text {
           // color: #fff;
         }
+
         // .png{
         //   background: url('../../../assets/images/case/wighttime.png') no-repeat;
         // }
       }
+
       .png {
         width: 18px;
         height: 18px;
@@ -2560,11 +2594,13 @@ export default {
         background-size: 100%;
         margin-right: 9px;
       }
+
       .text {
         font-size: 14px;
         color: #333333;
       }
     }
+
     .time::before {
       content: '';
       position: absolute;
@@ -2577,6 +2613,7 @@ export default {
       z-index: 1;
       border-radius: 4px;
     }
+
     .time_active {
       display: flex;
       justify-content: center;
@@ -2586,6 +2623,7 @@ export default {
       height: 38px;
       background: #387DF7;
       border-radius: 4px;
+
       .png {
         width: 20px;
         height: 20px;
@@ -2593,11 +2631,13 @@ export default {
         background-size: 100%;
         margin-right: 9px;
       }
+
       .text {
         font-size: 14px;
         color: #fff;
       }
     }
+
     .collect {
       position: relative;
       display: flex;
@@ -2607,17 +2647,21 @@ export default {
       width: 116px;
       height: 38px;
       border-radius: 4px;
+
       // background: #04243C;
       &:hover {
         // background: #387DF7;
         border: 1px solid #387DF7;
+
         .text {
           // color: #fff;
         }
+
         // .png{
         //   background: url('../../../assets/images/case/wight.png') no-repeat;
         // }
       }
+
       .png {
         width: 18px;
         height: 18px;
@@ -2625,11 +2669,13 @@ export default {
         background-size: 100%;
         margin-right: 9px;
       }
+
       .text {
         font-size: 14px;
         color: #333333;
       }
     }
+
     .collect::before {
       content: '';
       position: absolute;
@@ -2642,6 +2688,7 @@ export default {
       z-index: 1;
       border-radius: 4px;
     }
+
     .collect_active {
       display: flex;
       justify-content: center;
@@ -2651,6 +2698,7 @@ export default {
       height: 38px;
       background: #387DF7;
       border-radius: 4px;
+
       .png {
         width: 18px;
         height: 18px;
@@ -2658,6 +2706,7 @@ export default {
         background-size: 100%;
         margin-right: 9px;
       }
+
       .text {
         font-size: 14px;
         color: #fff;
@@ -2670,6 +2719,7 @@ export default {
     display: flex;
     justify-content: center;
     padding: 0 40px;
+
     .search_div_num {
       display: flex;
       justify-content: center;
@@ -2682,6 +2732,7 @@ export default {
       color: #387DF7;
     }
   }
+
   .data-content {
     background-color: #fff;
     padding: 5px 50px;
@@ -2721,6 +2772,7 @@ export default {
           color: #666666;
           margin-bottom: 8px;
         }
+
         .case-info-title {
           font-size: 15px;
           color: #333;
@@ -2819,10 +2871,22 @@ export default {
     text-align: center;
   }
 }
+
 .AI-case {
-  // max-width: 400px;
+  margin-bottom: 10px;
-  height: 100px;
+  position: relative;
-  background: #CEE4FF;
+
-  margin-bottom:10px
+  img {
+    width: 100%;
+  }
+
+  span {
+    width: 160px;
+    height: 40px;
+    position: absolute;
+    left: 20px;
+    top: 105px;
+    cursor: pointer;
+  }
 }
 </style>