Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/YFYC-H5

package-lock.json

@@ -17,6 +17,7 @@
         "vue-infinite-scroll": "^2.0.2",
         "vue-lazyload": "^1.3.3",
         "vue-router": "^3.2.0",
+        "vuedraggable": "^2.24.3",
         "vuex": "^3.6.2"
       },
       "devDependencies": {
@@ -12965,6 +12966,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -14776,6 +14782,14 @@
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "dependencies": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://r2.cnpmjs.org/vuex/-/vuex-3.6.2.tgz",
@@ -26425,6 +26439,11 @@
         }
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -27935,6 +27954,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://r2.cnpmjs.org/vuex/-/vuex-3.6.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "vue-infinite-scroll": "^2.0.2",
     "vue-lazyload": "^1.3.3",
     "vue-router": "^3.2.0",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/router/index.js

@@ -41,7 +41,30 @@ const routes = [{
     name: 'goodsPlay',
     component: () => import('../views/Goods/components/GoodsPlay.vue')
   },
+    // 分享
+    {
+      path: '/goods/share',
+      name: 'goodsShare',
+      component: () => import('../views/Goods/components/GoodsShare.vue')
+    },
+  // 悦·互动发布
+  {
+    path: '/layout/interact/issue',
+    name: 'interactIssue',
+    meta: {
+      myTitle: '悦·互动发布'
+    },
+    component: () => import('../views/Interact/components/InteractIssue.vue')
+  },
+  // 定位，位置
   {
+    path: '/layout/interact/location',
+    name: 'interactLocation',
+    meta: {
+      myTitle: '位置'
+    },
+    component: () => import('../views/Interact/components/interactLocation.vue')
+  }, {
     path: '/layout',
     name: 'layout',
     component: () => import('../views/Layout/index.vue'),
@@ -103,10 +126,11 @@ const routes = [{
         name: 'interact',
         meta: {
           myInd: 3,
-          myTitle:'悦·互动'
+          myTitle: '悦·互动'
         },
         component: () => import('../views/Interact/index.vue')
       },
+
       {
         path: '/layout/my',
         name: 'my',

src/views/Goods/components/GoodsShare.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="GoodsShare">
+    <img src="../../../assets/img/goods/share.png" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GoodsShare",
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.GoodsShare{
+  width: 100%;
+  height: 100%;
+  &>img{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+</style>

src/views/Goods/index.vue

@@ -22,7 +22,7 @@
           <img src="../../assets/img/goods/inco2.png" alt="">
           <p>130</p>
         </div>
-        <div>
+        <div @click="$router.push('/goods/share')">
           <img src="../../assets/img/goods/inco3.png" alt="">
           <p>130</p>
         </div>

src/views/Interact/components/InteractIssue.vue

@@ -1,37 +1,364 @@
 <template>
-  <div class='InteractIssue'>InteractIssue</div>
+  <div class="InteractIssue">
+    <div class="txt1">
+      <div class="txtBs">{{ txt1.length }}/20</div>
+      <van-field v-model="txt1" maxlength="20" placeholder="在此处填写标题" />
+    </div>
+    <div class="txt2">
+      <div class="txtBs">{{ txt2.length }}/500</div>
+      <van-field
+        v-model="txt2"
+        type="textarea"
+        maxlength="500"
+        placeholder="在此处填写正文"
+      />
+    </div>
+    <div class="imgTit">
+      <img src="../../../assets/img/interact/topic.png" alt="" />
+      话题：
+    </div>
+    <!-- 话题标签 -->
+    <div class="topicBox">
+      <div
+        class="topic"
+        v-for="item in topicData"
+        :key="item.id"
+        :class="{ topicAc: topic === item.id }"
+        @click="topic = item.id"
+      >
+        #{{ item.name }}
+      </div>
+    </div>
+
+    <div class="imgTit" @click="locationClick">
+      <div class="rightInco">
+        <van-icon name="arrow" />
+      </div>
+      <img src="../../../assets/img/interact/add.png" alt="" />
+      定位：
+    </div>
+    <!-- 定位标签 -->
+    <div class="locationBox">
+      <div
+        class="location"
+        v-for="item in locationData"
+        :key="item.id"
+        :class="{ locationAc: location === item.id }"
+        @click="location = item.id"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+
+    <!-- 上传图片 -->
+    <div class="upFile">
+      <van-uploader accept=".png,.jpg">
+        <div class="upImg"></div>
+      </van-uploader>
+      <Draggable
+        class="moveDraggable"
+        v-model="imgList"
+        group="itxst"
+        @start="start"
+        animation="300"
+      >
+        <transition-group>
+          <div class="imgRow" v-for="(item, index) in imgList" :key="item.name">
+            <img
+              :src="require(`@/assets/img/interact/${item.url}.png`)"
+              alt=""
+              @click="lookImg"
+            />
+            <!-- 删除 -->
+            <div class="delImg" @click="delImg(item.name)"></div>
+            <!-- 封面 -->
+            <div class="imgCover" v-show="index === 0">封面</div>
+          </div>
+        </transition-group>
+      </Draggable>
+    </div>
+    <div class="imgUpTit">可拖动图片调整顺序，首张图将作为封面。</div>
+    <!-- 发布按钮 -->
+    <div class="issueBtn" @click="issueDone">发 布</div>
+  </div>
 </template>
 
 <script>
-
+//导入draggable组件
+import Draggable from "vuedraggable";
+import { Dialog, ImagePreview } from "vant";
 export default {
-  name: 'InteractIssue',
-  components: {},
+  name: "InteractIssue",
+  components: { Draggable },
   data() {
     return {
-
+      txt1: "",
+      txt2: "",
+      topicData: [
+        { id: 1, name: "景点" },
+        { id: 2, name: "美食" },
+        { id: 3, name: "游玩" },
+        { id: 4, name: "酒店" },
+      ],
+      topic: 1,
+      locationData: [
+        { id: 1, name: "鸠兹广场" },
+        { id: 2, name: "中江塔" },
+        { id: 3, name: "老海关" },
+        { id: 4, name: "鸠兹古镇" },
+      ],
+      location: 1,
+      // 上传相关
+      imgCover: "",
+      dragging: null,
+      imgList: [
+        { name: "1", url: "1" },
+        { name: "2", url: "2" },
+        { name: "3", url: "3" },
+      ],
     };
   },
   computed: {},
   watch: {},
   methods: {
-
+    // 点击定位
+    locationClick(){
+     this.$router.push('/layout/interact/location')
+    },
+    // 点击发布
+    issueDone(){
+      console.log('-------发布');
+    },
+    // 拖拽图片
+    start(e) {},
+    // 查看大图
+    lookImg() {
+      ImagePreview({
+        images: ["https://img01.yzcdn.cn/vant/apple-1.jpg"],
+        showIndex: false,
+      });
+    },
+    // 点击删除图片
+    delImg(id) {
+      Dialog.confirm({
+        title: "确定删除吗?",
+        beforeClose: (action, done) => {
+          if (action === "confirm") {
+            // 点击了确定
+            this.imgList = this.imgList.filter((v) => v.name !== id);
+          }
+          done();
+        },
+      });
+    },
   },
-  created() {
-
-  },
-  mounted() {
-
-  },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
+.InteractIssue {
+  width: 100%;
+  height: 100%;
+  padding: 20px 15px;
+  overflow-y: auto;
 
+  /deep/.van-cell {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 40px 0 5px;
+    background-color: #f4f4f4;
+  }
+
+  .txt1 {
+    width: 100%;
+    height: 36px;
+    position: relative;
+
+    .txtBs {
+      z-index: 3;
+      color: #9e9a9a;
+      font-size: 14px;
+      position: absolute;
+      right: 3px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .txt2 {
+    margin: 20px 0;
+    position: relative;
+    .txtBs {
+      z-index: 3;
+      color: #9e9a9a;
+      font-size: 14px;
+      position: absolute;
+      right: 3px;
+      bottom: 5px;
+    }
+    /deep/.van-field__body {
+      height: calc(100% - 30px);
+    }
+    /deep/textarea {
+      height: 100%;
+    }
+    /deep/.van-cell {
+      line-height: 21px;
+      width: 100%;
+      height: 200px;
+      padding: 0 5px;
+      background-color: #f4f4f4;
+    }
+  }
+
+  .imgTit {
+    margin: 20px 0;
+    font-size: 18px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    position: relative;
+    .rightInco {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #c2c2c2;
+      font-size: 22px;
+    }
+    & > img {
+      width: 20px;
+      margin-right: 8px;
+    }
+  }
+
+  .topicBox {
+    display: flex;
+    flex-wrap: wrap;
+    .topic {
+      font-size: 14px;
+      border-radius: 17px;
+      border: 1px solid #393939;
+      min-width: 60px;
+      padding: 0 10px;
+      height: 34px;
+      line-height: 32px;
+      margin-right: 16px;
+      margin-bottom: 12px;
+    }
+    .topicAc {
+      border: none;
+      line-height: 34px;
+      background-color: #ff7e89;
+      color: #fff;
+    }
+  }
+
+  .locationBox {
+    display: flex;
+    flex-wrap: wrap;
+
+    .location {
+      font-size: 14px;
+      border-radius: 17px;
+      border: 1px solid #393939;
+      min-width: 60px;
+      padding: 0 10px;
+      height: 34px;
+      line-height: 32px;
+      margin-right: 16px;
+      margin-bottom: 12px;
+    }
+    .locationAc {
+      border: none;
+      line-height: 34px;
+      background-color: #b5d4ff;
+      color: #fff;
+    }
+  }
+
+  .upFile {
+    margin: 20px 0 0px;
+    display: flex;
+    flex-wrap: wrap;
+    /deep/.van-uploader {
+      margin: 0 10px 10px 0;
+    }
+    .upImg {
+      width: 80px;
+      height: 80px;
+      background-image: url("../../../assets/img/interact/upload.png");
+      background-size: 100% 100%;
+    }
+    .moveDraggable{
+      width: calc(100% - 90px);
+    }
+    .moveDraggable span {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .imgRow {
+      position: relative;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      width: 80px;
+      height: 80px;
+      border-radius: 6px;
+      & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .delImg {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        top: -6px;
+        right: -6px;
+        background-image: url("../../../assets/img/interact/del.png");
+        background-size: 100% 100%;
+      }
+      .imgCover {
+        pointer-events: none;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 40px;
+        line-height: 50px;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        background-image: url("../../../assets/img/interact/bg.png");
+        background-size: 100% 100%;
+      }
+    }
+  }
+  .imgUpTit{
+    font-size: 14px;
+    color: #A6A6A6;
+    margin: 10px 0 40px;
+  }
+  .issueBtn{
+    width: 80%;
+    height: 50px;
+    max-width: 300px;
+    margin: 0 auto 30px;
+    line-height: 50px;
+    background-color: #FF7E89;
+    border-radius: 25px;
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+  }
+}
 </style>

src/views/Interact/components/interactLocation.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="interactLocation">
+    <!-- 输入框 -->
+    <div class="inputBox" @keydown.enter="searchFu()">
+      <div class="searInco" @click="searchFu()">
+        <van-icon name="search" />
+      </div>
+      <van-field maxlength="20" v-model="txt" placeholder="搜索位置" />
+    </div>
+    <div class="locationBox">
+      <div class="row" v-for="item in locationData" :key="item.id">
+        <h3>{{item.name}}</h3>
+        <div class="row_floo">
+          <div class="row_flooLL">{{item.loc}}</div>
+          <div class="row_flooRR">{{item.num}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "interactLocation",
+  components: {},
+  data() {
+    return {
+      txt: "",
+      locationData:[
+        {id:1,name:'芜湖市',loc:'中国安徽省芜湖市',num:''},
+        {id:2,name:'鸠兹广场',loc:'安徽省芜湖市镜湖区滨江路桥口',num:'247m'},
+        {id:3,name:'中江塔',loc:'安徽省芜湖市镜湖区滨江路桥口',num:'425m'},
+        {id:4,name:'方特旅游区',loc:'安徽省芜湖市镜湖区银湖北路80号',num:'692m'},
+        {id:5,name:'芜湖滨江公园',loc:'芜湖市镜湖区新芜路7号',num:'849m'},
+        {id:6,name:'芜湖长江三桥',loc:'安徽省芜湖市',num:'945m'},
+        {id:7,name:'鸠兹古镇',loc:'安徽省芜湖市鸠江区陈棱路与徽州路交汇处西北角',num:'1007m'},
+        {id:8,name:'临江桥',loc:'安徽省芜湖市',num:'1205m'},
+        {id:9,name:'芜湖大剧院',loc:'安徽芜湖市镜湖区滨江路17号',num:'2351m'}
+      ]
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    searchFu() {},
+  },
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.interactLocation {
+  width: 100%;
+  height: 100%;
+  padding: 10px 15px 40px;
+  overflow-y: auto;
+
+  .inputBox {
+    margin: 0px auto;
+    width: 100%;
+    height: 30px;
+    position: relative;
+
+    .searInco {
+      color: #a0a0a0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 20px;
+      position: absolute;
+      top: 0;
+      left: 10px;
+      z-index: 3;
+      width: 20px;
+      height: 30px;
+    }
+
+    /deep/.van-cell {
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+      padding: 0px 0 0px 36px;
+      background-color: #F9F9F9;
+      border-radius: 5px;
+    }
+  }
+  .locationBox{
+    margin-top: 20px;
+    .row{
+      padding-bottom: 15px;
+      border-bottom: 1px solid #E5E5E5;
+      padding-top: 15px;
+      &>h3{
+        font-size: 16px;
+        color: #393939;
+      }
+      .row_floo{
+        margin: 10px 0 0;
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+        color: #868686;
+        .row_flooLL{
+          max-width: 80%;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Interact/index.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class='My'>
+  <div class="My">
     <!-- 输入框 -->
     <div class="inputBox" @keydown.enter="searchFu()">
       <div class="searInco">
         <van-icon name="search" />
       </div>
       <div class="searBtn" @click="searchFu()">搜索</div>
-      <van-field maxlength="10" v-model="txt" placeholder="请输入要搜索的内容" />
+      <van-field
+        maxlength="10"
+        v-model="txt"
+        placeholder="请输入要搜索的内容"
+      />
     </div>
     <!-- 精彩必体验 -->
     <div class="titleTit">精彩必体验</div>
@@ -16,7 +20,7 @@
     <!-- 主体内容 -->
     <div class="mainBox">
       <div class="row" v-for="item in spotData" :key="item.id">
-        <img :src="require(`@/assets/img/interact/row${item.id}.png`)" alt="">
+        <img :src="require(`@/assets/img/interact/row${item.id}.png`)" alt="" />
         <div class="name">{{ item.name }}</div>
         <div class="author">
           <div class="author_ll">
@@ -24,61 +28,63 @@
             <span>{{ item.author }}</span>
           </div>
           <div class="author_rr">{{ item.time }}</div>
-
         </div>
       </div>
     </div>
     <!-- +号 -->
     <div class="issue">
-      <img src="../../assets/img/interact/issue.png" alt="" />
+      <img
+        src="../../assets/img/interact/issue.png"
+        alt=""
+        @click="$router.push('/layout/interact/issue')"
+      />
     </div>
-    
   </div>
 </template>
 
 <script>
-
 export default {
   components: {},
   data() {
     return {
-      txt: '',
+      txt: "",
       bsData: [
-        { id: 1, name: '梦幻游乐王国' },
-        { id: 2, name: '古建筑' },
-        { id: 3, name: '美食' },
-        { id: 4, name: '周边风景游玩' },
-        { id: 5, name: '美景' },
+        { id: 1, name: "梦幻游乐王国" },
+        { id: 2, name: "古建筑" },
+        { id: 3, name: "美食" },
+        { id: 4, name: "周边风景游玩" },
+        { id: 5, name: "美景" },
       ],
       spotData: [
-        { id: 1, name: '方特梦幻王国万圣夜', author: '王大锤', time: '2022-11-16' },
-        { id: 2, name: '芜湖老海关', author: '王大锤', time: '2022-11-16' },
-        { id: 3, name: '中江塔', author: '王大锤', time: '2022-11-16' },
-        { id: 4, name: '鸠兹古镇', author: '王大锤', time: '2022-11-16' },
-      ]
+        {
+          id: 1,
+          name: "方特梦幻王国万圣夜",
+          author: "王大锤",
+          time: "2022-11-16",
+        },
+        { id: 2, name: "芜湖老海关", author: "孔连顺", time: "2022-11-16" },
+        { id: 3, name: "中江塔", author: "子墨", time: "2022-11-16" },
+        { id: 4, name: "鸠兹古镇", author: "张本钰", time: "2022-11-16" },
+      ],
     };
   },
   computed: {},
   watch: {},
   methods: {
     searchFu() {
-      console.log('---------');
-    }
+      console.log("---------");
+    },
   },
-  created() {
-
-  },
-  mounted() {
-
-  },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 .My {
@@ -87,10 +93,10 @@ export default {
   overflow-y: auto;
   padding: 20px 15px;
   position: relative;
-  .issue{
+  .issue {
     margin: 20px 0;
     text-align: center;
-    &>img{
+    & > img {
       width: 40px;
     }
   }
@@ -108,7 +114,7 @@ export default {
       height: 30px;
       border-radius: 3px;
       z-index: 2;
-      background-color: #FE6E69;
+      background-color: #fe6e69;
       font-size: 14px;
       color: #fff;
       line-height: 30px;
@@ -116,7 +122,7 @@ export default {
     }
 
     .searInco {
-      color: #A0A0A0;
+      color: #a0a0a0;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -134,7 +140,7 @@ export default {
       height: 30px;
       line-height: 30px;
       padding: 0px 0 0px 36px;
-      background-color: #F4F4F4;
+      background-color: #f4f4f4;
       border-radius: 15px;
     }
   }
@@ -150,14 +156,14 @@ export default {
     display: flex;
     flex-wrap: wrap;
 
-    &>div {
+    & > div {
       text-align: center;
       min-width: 60px;
       padding: 0 5px;
       height: 30px;
       line-height: 30px;
       border-radius: 2px;
-      background-color: #F4F4F4;
+      background-color: #f4f4f4;
       margin: 0 15px 15px 0;
       font-size: 12px;
       color: #333333;
@@ -174,7 +180,7 @@ export default {
       overflow: hidden;
       width: 48%;
       height: 260px;
-      background-color: #F7F8FA;
+      background-color: #f7f8fa;
       border-radius: 4px;
       color: #333333;
 
@@ -182,7 +188,7 @@ export default {
         margin-right: 0;
       }
 
-      &>img {
+      & > img {
         width: 100%;
         height: 180px;
         object-fit: cover;
@@ -205,7 +211,7 @@ export default {
         .author_ll {
           vertical-align: middle;
 
-          &>img {
+          & > img {
             margin-right: 5px;
             width: 12px;
             height: 12px;