commit

src/api/report.js

@@ -106,4 +106,11 @@ export const apiChapterTickerValue=params=>{
  */
 export const apiReportIndexNewbanner=()=>{
     return get('/pc/banner',{})
+}
+
+/**
+ * 专栏详情中客户评价
+ */
+export const apiSpecialColumnComment=params=>{
+    return get('/pc/comment',params)
 }

src/components/Audio.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { useDraggable } from '@vueuse/core'
+import { ref,computed } from 'vue'
+import { useStore } from 'vuex';
+
+const store=useStore()
+
+const globalAudioIns=ref(null)
+store.state.audioData.INS=globalAudioIns
+
+// 格式化音频时长
+const formatAudioTime=(e)=>{
+    const minus = parseInt(e / 60);
+    const sec = parseInt(e % 60);
+    return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
+}
+
+// 拖动头
+const drag = ref(null)
+const {style} = useDraggable(drag,{
+  initialValue: {},
+})
+// 当前音频地址
+const curUrl=computed(()=>{
+    return store.state.audioData.list[store.state.audioData.index]&&store.state.audioData.list[store.state.audioData.index].url||''
+})
+let curTime=ref(0)//当前音频播放时长
+const audioTimeupdate=(e)=>{// 音频播放时间更新
+    curTime.value=e.target.currentTime
+}
+
+const audioOnError=(e)=>{
+    console.log('音频播放错误');
+}
+
+const audioOnEnd=()=>{// 音频播放结束事件
+    store.commit('changeAudio','auto')
+}
+
+const audioOnPause=()=>{// 音频播放暂停事件
+    store.commit('audioStatusChange','paused')
+}
+
+const audioOnPlay=()=>{// 音频开始播放事件
+    store.commit('audioStatusChange','paly')
+}
+
+
+const handleClickAudioBtn=(type)=>{ //点击音频按钮
+    if(type==='center'){
+        if(store.state.audioData.paused){
+            store.state.audioData.INS.play()
+        }else{
+            store.state.audioData.INS.pause()
+        }
+    }else{
+        store.commit('changeAudio',type)
+    }
+}
+
+//拖动进度条
+const handleDragTime=(e)=>{
+    store.state.audioData.INS.currentTime=e
+}
+
+// 关闭弹窗
+const closeAudioPop=()=>{
+    store.commit('closeAudioPop')
+}
+
+</script>
+
+<template>
+    <audio 
+        @ended="audioOnEnd" 
+        @pause="audioOnPause"
+        @play="audioOnPlay"
+        @timeupdate="audioTimeupdate"
+        @error="audioOnError"
+        :src="curUrl"
+        ref="globalAudioIns"
+        style="display: none;"
+        autoplay
+    ></audio>
+    <div :style="style" class="global-audio-pop-wrap" v-if="$store.state.audioData.show">
+        <img src="@/assets/audio-close.png" class="close-btn" alt="" @click="closeAudioPop">
+        <div class="drag-head" ref="drag"></div>
+        <div class="flex-col-center content">
+            <div class="flex-col-center btns" style="flex-shrink: 0;">
+                <div class="before-btn" @click="handleClickAudioBtn('before')"></div>
+                <div :class="['center-btn',!$store.state.audioData.paused&&'center-btn-play']" @click="handleClickAudioBtn('center')"></div>
+                <div class="next-btn" @click="handleClickAudioBtn('next')"></div>
+            </div>
+            <div class="flex-col-center right-box">
+                <div class="time">{{formatAudioTime(curTime)}}</div>
+                <el-slider 
+                    v-model="curTime"
+                    :show-tooltip="false" 
+                    @change="handleDragTime"
+                    :max="Number($store.state.audioData.list[$store.state.audioData.index].time)"
+                />
+            </div>
+        </div>
+        <div style="text-align:center;font-size: 14px;color: #666;">{{$store.state.audioData.list[$store.state.audioData.index].name}}</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.global-audio-pop-wrap{
+    overflow: hidden;
+    position: fixed;
+    z-index: 5000;
+    left: 50%;
+    bottom: 20px;
+    left: 15vw;
+    width: 70vw;
+    height: 80px;
+    background-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0px 4px 40px 1px rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    border: 1px solid #EFEFEF;
+    .close-btn{
+        position: absolute;
+        top: 10px;
+        right: 20px;
+        width: 14px;
+        height: 14px;
+    }
+    .drag-head{
+        cursor: move;
+        height: 20px;
+    }
+    .content{
+        padding-left: 40px;
+        .before-btn,.next-btn{
+            width: 24px;
+            height: 24px;
+            background-image: url('@/assets/audio-before-default.png');
+            background-size: cover;
+            display: block;
+            cursor: pointer;
+        }
+        .next-btn{
+            transform: rotate(180deg);
+        }
+        .center-btn{
+            display: block;
+            width: 34px;
+            height: 34px;
+            margin: 0 12px;
+            background-image: url('@/assets/audio-pause.png');
+            background-size: cover;
+            cursor: pointer;
+        }
+        .center-btn-play{
+            background-image: url('@/assets/audio-doing.png');
+        }
+
+        .right-box{
+            flex: 1;
+            margin-left: 10px;
+            padding-right: 80px;
+            .time{
+                color: #fff;
+                background-color: #F3A52F;
+                font-size: 12px;
+                line-height: 15px;
+                height: 15px;
+                padding: 0 5px;
+                border-radius: 15px;
+                margin-right: 20px;
+            }
+            :deep(.el-slider__button){
+                border-color: #F3A52F;
+            }
+            :deep(.el-slider__runway){
+                background-color: #FFCF88;
+            }
+            :deep(.el-slider__bar){
+                background-color: #F3A52F;
+            }
+        }
+    }
+    
+}
+</style>

src/layout/Index.vue

@@ -2,28 +2,8 @@
 import Aside from "./component/Aside.vue";
 import Header from './component/Header.vue'
 import Footer from './component/Footer.vue'
-import { useStore } from "vuex";
-import { ref } from "vue";
-import { useRouter } from "vue-router";
+import AudioBox from '@/components/Audio.vue'
 
-const router=useRouter()
-const store = useStore();
-
-
-// 音频切换
-const handleAudioChange=(e)=>{
-  store.commit('changeAudio',e)
-}
-// 关闭音频
-const handleAudioClose=()=>{
-  store.commit('closeAudio')
-}
-//音频状态改变
-const handleAudioStatus=(e)=>{
-  store.commit('audioStatusChange',e)
-}
-const globalAudioIns=ref(null)
-store.state.audioData.INS=globalAudioIns
 
 </script>
 
@@ -55,28 +35,8 @@ store.state.audioData.INS=globalAudioIns
       </el-container>
     </el-container>
 
-    <!-- 全局音频模块 -->
-    <div class="global-audio-box" v-if="$store.state.audioData.list.length>0" v-drag="{'zIndex':100}">
-      <div style="height:10px;cursor: move;" draggable="true">
-        <svg @click="handleAudioClose" class="icon" width="20" height="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg>
-      </div>
-      <h2 style="text-align:center;font-size:14px;padding:0 20px">{{$store.state.audioData.list[$store.state.audioData.index].voiceName}}</h2>
-      <audio 
-        controls 
-        autoplay 
-        controlsList="nodownload"
-        @ended="handleAudioChange('auto')" 
-        @pause="handleAudioStatus('paused')"
-        @play="handleAudioStatus('paly')"
-        :src="$store.state.audioData.list[$store.state.audioData.index].voiceUrl"
-        ref="globalAudioIns"
-      ></audio>
-      <div class="btns" style="text-align:center;margin:4px 0 10px 0">
-        <span :class="['btn',$store.state.audioData.index==0&&'no-audio']" style="margin-right:20px;" @click="handleAudioChange('before')"></span>
-        <span :class="['btn',$store.state.audioData.index==$store.state.audioData.list.length-1&&'no-audio']" style="transform: rotate(180deg);" @click="handleAudioChange('next')"></span>
-      </div>
-    </div>
-    
+    <!-- 音频模块 -->
+    <AudioBox></AudioBox>
   </div>
 </template>
 

src/store/index.js

@@ -19,11 +19,13 @@ export default createStore({
     token:token,
     userInfo:null,
     audioData:{
-      INS:null,
-      list:[],//音频数据
+      INS:null,//音频实例
+      list:[],//音频数据{time:音频时长,url:音频地址,name:音频名称}
       index:0,//当前播放第几个
       activityId:0,//活动的id
-      paused:false,//当前音频播放状态
+      reportId:0,//报告的id
+      paused:true,//当前音频播放状态
+      show:false,//是否显示音频弹窗
     },
 
     activityItemStatus:{//活动详情中某个活动点击了会议提醒\报名 更新列表状态
@@ -47,9 +49,12 @@ export default createStore({
 
     // 设置音频播放
     addAudio(state,e){
-      state.audioData.list=e.list
-      state.audioData.activityId=e.activityId
       state.audioData.index=e.index
+      state.audioData.list=e.list
+      state.audioData.activityId=e.activityId||0
+      state.audioData.reportId=e.reportId||0
+      state.audioData.show=true
+      state.audioData.INS.play()
     },
     //切换音频
     changeAudio(state,e){
@@ -68,6 +73,13 @@ export default createStore({
       }else if(e==='auto'){//自动播放切换下一首
         if(state.audioData.index==state.audioData.list.length-1){
           // ElMessage('当前为最后一首')
+          state.audioData.list=[]
+          state.audioData.index=0
+          state.audioData.activityId=0
+          state.audioData.reportId=0
+          state.audioData.INS=null
+          state.audioData.show=false
+          state.audioData.paused=false
         }else{
           state.audioData.index++
         }
@@ -78,7 +90,10 @@ export default createStore({
       state.audioData.list=[]
       state.audioData.index=0
       state.audioData.activityId=0
+      state.audioData.reportId=0
       state.audioData.INS=null
+      state.audioData.show=false
+      state.audioData.paused=false
     },
     //音频状态切换
     audioStatusChange(state,e){
@@ -86,8 +101,13 @@ export default createStore({
         state.audioData.paused=true
       }else{
         state.audioData.paused=false
+        state.audioData.show=true
       }
     },
+    //关闭音频弹窗
+    closeAudioPop(state){
+      state.audioData.show=false
+    },
 
     // 更新活动列表某项状态
     updateActivityStatus(state,e){

src/views/activity/List.vue

@@ -204,8 +204,8 @@ onUnmounted(()=>{
 })
 
 const aduioIconPlay=new URL('../../assets/audio-doing-white.png', import.meta.url).href
-const aduioIconPaused=new URL('../../assets/audio-pause.png', import.meta.url).href
-const aduioIconDefault=new URL('../../assets/audio-pause-3.png', import.meta.url).href
+const aduioIconPaused=new URL('../../assets/audio-pause-white.png', import.meta.url).href
+const aduioIconDefault=new URL('../../assets/audio-pause.png', import.meta.url).href
 
 onMounted(() => {
   //向小程序发送消息

src/views/report/ChapterDetail.vue

@@ -78,7 +78,8 @@ const getChapterReportDetail=async ()=>{
             video_name:res.data.report_chapter_item.video_name,
             video_size:res.data.report_chapter_item.video_size,
             video_play_seconds:res.data.report_chapter_item.video_play_seconds,
-            video_url:res.data.report_chapter_item.video_url
+            video_url:res.data.report_chapter_item.video_url,
+            reportId:res.data.report_chapter_item.report_chapter_id+res.data.report_chapter_item.report_id
         }
         document.title=res.data.report_chapter_item.classify_name_first
         if(res.data.auth_ok&&res.data.report_chapter_item.classify_name_first==='晨报'){

src/views/report/Detail.vue

@@ -23,7 +23,8 @@ const getReportDetail=async ()=>{
             video_name:res.data.report_info.video_name,
             video_size:res.data.report_info.video_size||'',
             video_play_seconds:res.data.report_info.video_play_seconds,
-            video_url:res.data.report_info.video_url
+            video_url:res.data.report_info.video_url,
+            reportId:res.data.report_info.report_id
         }
         document.title = res.data.report_info.classify_name_first
 

src/views/report/Index.vue

@@ -282,10 +282,12 @@ $active-color: #f3a52f;
       background-color: #fff;
       padding-top: 30px;
       padding-bottom: 12px;
-      // min-width: 880px;
-      // max-width: 1240px;
       width: 100%;
       .first-nav {
+        max-width: 1240px;
+        @media (max-width:1200px) {
+          max-width: 55vw;
+        }
         .item {
           width: 140px;
           height: 40px;
@@ -297,6 +299,13 @@ $active-color: #f3a52f;
           font-size: 16px;
           margin-right: 30px;
           cursor: pointer;
+          @media (max-width:1200px) {
+            width: 80px;
+            font-size: 14px;
+            height: 30px;
+            line-height: 30px;
+            margin-right: 15px;
+          }
 
           &:hover {
             background: #FFFBF5;
@@ -312,12 +321,20 @@ $active-color: #f3a52f;
           box-shadow: 0px 6px 7px 1px #FFF7EB;
         }
         .see-more{
+          height: 20px;
+          flex-shrink: 0;
           color: #f3a52f;
           font-size: 16px;
           position: relative;
           top: 10px;
           margin-left: 30px;
           cursor: pointer;
+          @media (max-width:1200px){
+            font-size: 14px;
+            margin-left: 10px;
+            font-size: 14px;
+            top: 4px;
+          }
           &::after{
             content: '';
             display: inline-block;
@@ -328,6 +345,11 @@ $active-color: #f3a52f;
             position: relative;
             top: 2px;
             left: 5px;
+            @media (max-width:1200px){
+              width: 12px;
+              height: 12px;
+              top: 0;
+            }
           }
         }
       }
@@ -339,6 +361,15 @@ $active-color: #f3a52f;
         &::-webkit-scrollbar {
           display: none;
         }
+        max-width: 1240px;
+        @media (max-width:1200px) {
+          max-width: 50vw;
+          &::-webkit-scrollbar {
+            display: block;
+            width: 0px;
+            height: 5px;
+          }
+        }
 
         .sub-item {
           flex-shrink: 0;
@@ -346,6 +377,10 @@ $active-color: #f3a52f;
           font-size: 16px;
           color: #666666;
           cursor: pointer;
+          @media (max-width:1200px){
+            font-size: 14px;
+            margin-right: 15px;
+          }
         }
 
         .sub-active {

src/views/report/List.vue

@@ -5,9 +5,11 @@ import { apiSubClassifyList , apiReportList } from '@/api/report'
 import Search from '@/components/Search.vue'
 import SelfList from '@/components/SelfList.vue'
 import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 
 const route=useRoute()
 const router=useRouter()
+const store=useStore()
 
 let classifyId=ref(route.query.classifyId||0) //一级分类id
 
@@ -95,6 +97,34 @@ let isMounted=ref(false)
 onMounted(()=>{
     isMounted.value=true
 })
+
+
+//播放音频
+const handlePlayAudio=(item)=>{
+    if(item.video_list){
+        if(store.state.audioData.reportId==item.report_id){
+            if(store.state.audioData.paused){
+                store.state.audioData.INS.play()
+            }else{
+                store.state.audioData.INS.pause()
+            }
+            return
+        }
+        const arr=item.video_list.map(_item=>{
+            return {
+                name:_item.video_name,
+                url:_item.video_url,
+                time:_item.video_play_seconds
+            }
+        })
+        store.commit('addAudio',{
+            list:arr,
+            reportId:item.report_id,
+            index:0
+        })
+    }
+}
+
 </script>
 
 <template>
@@ -148,7 +178,11 @@ onMounted(()=>{
                     <div class="des" v-html="item.abstract"></div>
                     <div class="clear-float bot">
                         <span class="time">{{moment(item.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
-                        <div class="btn" v-if="item.auth_ok">立即播放</div>
+                        <div 
+                            class="btn" 
+                            v-if="item.auth_ok" 
+                            @click.stop="handlePlayAudio(item)"
+                        >{{$store.state.audioData.reportId==item.report_id?$store.state.audioData.paused?'已暂停':'播放中':'立即播放'}}</div>
                     </div>  
                 </div>
             </div>

src/views/report/components/AudioBox.vue

@@ -1,21 +1,41 @@
 <script setup>
+import { useStore } from 'vuex';
+
 const props=defineProps({
     data:{
         type:Object
     }
 })
 
+const store=useStore()
+
 const formatVoiceTime = (e) => {
   let minus = parseInt(e / 60);
   let sec = parseInt(e % 60);
   return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
 };
 
+const handleClickAudio=()=>{
+    if(store.state.audioData.reportId==props.data.reportId){
+        if(store.state.audioData.paused){
+            store.state.audioData.INS.play()
+        }else{
+            store.state.audioData.INS.pause()
+        }
+        return
+    }
+    store.commit('addAudio',{
+        list:[{time:props.data.video_play_seconds,url:props.data.video_url,name:props.data.video_name}],
+        reportId:props.data.reportId,
+        index:0
+    })
+}
+
 </script>
 
 <template>
     <div class="flex audio-box">
-        <img class="img" src="@/assets/audio-pause-big.png" alt="">
+        <div :class="['img',($store.state.audioData.reportId==props.data.reportId&&!$store.state.audioData.paused)&&'img-play']" @click="handleClickAudio"></div>
         <div class="content">
             <div class="name">{{props.data.video_name}}</div>
             <div class="des">
@@ -41,6 +61,11 @@ const formatVoiceTime = (e) => {
         margin-right: 20px;
         background-color: #fff;
         cursor: pointer;
+        background-image: url('@/assets/audio-pause-big.png');
+        background-size: cover;
+    }
+    .img-play{
+        background-image: url('@/assets/audio-doing-big.png');
     }
     .content{
         flex: 1;

src/views/report/specialColumn/Detail.vue

@@ -2,13 +2,15 @@
 import {reactive, ref} from 'vue'
 import moment from 'moment';
 import SelfList from '@/components/SelfList.vue'
-import {apiSpecialColumnDetail,apiSpecialColumnReportList} from '@/api/report'
+import {apiSpecialColumnDetail,apiSpecialColumnReportList,apiSpecialColumnComment} from '@/api/report'
 import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 
 const route=useRoute()
 const router=useRouter()
+const store=useStore()
 
-let nav=ref('专栏目录')
+let nav=ref('专栏介绍')
 
 let info=ref(null)//专栏详情
 const getSpecialColumnDetail=async ()=>{
@@ -20,6 +22,16 @@ const getSpecialColumnDetail=async ()=>{
 }
 getSpecialColumnDetail()
 
+// 客户评价
+let commentList=ref([])
+const getComment=async ()=>{
+    const res=await apiSpecialColumnComment({classify_id_second:Number(route.query.columnId)})
+    if(res.code===200){
+        commentList.value=res.data
+    }
+}
+getComment()
+
 
 // 获取报告列表
 let listState=reactive({
@@ -64,32 +76,52 @@ const goReportDetail=(item)=>{
 }
 
 
+//播放音频
+const handlePlayAudio=(item)=>{
+    if(store.state.audioData.reportId==item.report_id){
+        if(store.state.audioData.paused){
+            store.state.audioData.INS.play()
+        }else{
+            store.state.audioData.INS.pause()
+        }
+        return
+    }
+    store.commit('addAudio',{
+        list:[{name:item.video_name,url:item.video_url,time:item.video_play_seconds}],
+        reportId:item.report_id,
+        index:0
+    })
+}
+
+
 
 </script>
 
 <template>
     <div class="specialColumn-detail-page" v-if="info">
-        <div class="top-abstract-box" >
+        <div class="top-user-box" >
             <div class="title">{{info.classify_name_second}}</div>
-            <p class="abstract">{{info.abstract}}</p>
+            <div class="flex-col-center">
+                <img class="avatar" :src="info.avatar_img_url" alt="">
+                <div>
+                    <div>
+                        <span class="name">{{info.report_author}}</span>
+                        <span class="vip" v-if="info.vip_title">{{info.vip_title}}</span>
+                    </div>
+                    <p>{{info.author_descript}}</p>
+                </div>
+
+            </div>
         </div>
         <div class="main-box">
             <div class="nav-box">
-                <span :class="nav==='分析师介绍'&&'active'" @click="nav='分析师介绍'">分析师介绍</span>
+                <span :class="nav==='专栏介绍'&&'active'" @click="nav='专栏介绍'">专栏介绍</span>
                 <span :class="nav==='专栏目录'&&'active'"  @click="nav='专栏目录'">专栏目录</span>
                 <span :class="nav==='客户评价'&&'active'"  @click="nav='客户评价'">客户评价</span>
             </div>
-            <!-- 分析师介绍模块 -->
-            <div class="user-info-wrap" v-if="nav==='分析师介绍'">
-                <div class="flex user-box">
-                    <img class="avatar" :src="info.avatar_img_url" alt="">
-                    <div>
-                        <div>
-                            <span class="name">{{info.report_author}}</span>
-                            <span class="vip" v-if="info.vip_title">{{info.vip_title}}</span>
-                        </div>
-                    </div>
-                </div>
+            <!-- 专栏介绍模块 -->
+            <div class="introduce-wrap" v-if="nav==='专栏介绍'">
+                <p>{{info.abstract}}</p>
             </div>
             <!-- 专栏报告模块 -->
             <template v-if="nav==='专栏目录'">
@@ -118,7 +150,10 @@ const goReportDetail=(item)=>{
                                 <div class="des" v-html="item.abstract"></div>
                                 <div class="time">{{moment(item.publish_time).format('YYYY.MM.DD HH:mm')}}</div>
                             </div>
-                            <div class="global-plain-btn audio-btn">立即播放</div>
+                            <div 
+                                class="global-plain-btn audio-btn" 
+                                @click.stop="handlePlayAudio(item)"
+                            >{{$store.state.audioData.reportId==item.report_id?$store.state.audioData.paused?'已暂停':'播放中':'立即播放'}}</div>
                         </div>
                     </div>
                 </SelfList>
@@ -129,13 +164,48 @@ const goReportDetail=(item)=>{
 
 <style lang="scss" scoped>
 .specialColumn-detail-page{
-    .top-abstract-box{
+    .top-user-box{
+        height: 230px;
+        background-image: url('@/assets/bg-1.png');
+        background-size: cover;
+        background-repeat: no-repeat;
+        padding-top: 40px;
+        padding-left: 75px;
         .title{
-            font-size: 28px;
-            margin-bottom: 16px;
+            font-size: 32px;
+            font-weight: bold;
+            margin-bottom: 18px;
         }
-        .abstract{
-            line-height: 2;
+        .avatar{
+            width: 90px;
+            height: 90px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-right: 13px;
+        }
+        .name{
+            font-size: 20px;
+            font-weight: bold;
+            margin-right: 10px;
+        }
+        .vip{
+            background-color: #FAF7EE;
+            font-size: 14px;
+            height: 24px;
+            line-height: 24px;
+            padding: 0 10px;
+            border-radius: 23px;
+            &::before{
+                content: '';
+                display: inline-block;
+                width: 15px;
+                height: 15px;
+                background-image: url('@/assets/tag.png');
+                background-size: cover;
+                position: relative;
+                top: 2px;
+                margin-right: 3px;
+            }
         }
     }
 
@@ -169,42 +239,10 @@ const goReportDetail=(item)=>{
             }
         }
 
-        .user-info-wrap{
-            margin-top: 40px;
-            .user-box{
-                align-items: center;
-                .avatar{
-                    width: 90px;
-                    height: 90px;
-                    object-fit: cover;
-                    display: block;
-                    margin-right: 18px;
-                }
-                .name{
-                    font-size: 20px;
-                    font-weight: bold;
-                    margin-right: 10px;
-                }
-                .vip{
-                    background-color: #FAF7EE;
-                    font-size: 14px;
-                    height: 24px;
-                    line-height: 24px;
-                    padding: 0 10px;
-                    border-radius: 23px;
-                    &::before{
-                        content: '';
-                        display: inline-block;
-                        width: 15px;
-                        height: 15px;
-                        background-image: url('@/assets/tag.png');
-                        background-size: cover;
-                        position: relative;
-                        top: 2px;
-                        margin-right: 3px;
-                    }
-                }
-            }
+        .introduce-wrap{
+            font-size: 18px;
+            color: #666;
+            line-height: 34px;
         }
 
         .report-list{