细节

src/components/common/BookCard.vue

@@ -254,7 +254,7 @@ export default {
   }
   .bottom {
     // height: 132px;
-    padding: 12px;
+    padding: 4px 12px 12px;
   }
   p {
     margin: 0;
@@ -266,19 +266,23 @@ export default {
     font-size: 14px;
     line-height: 22px;
     color: #2f3742;
-    white-space: nowrap;
-    overflow: hidden;
+    height: 44px;
+    word-break: break-word;
     text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 超出几行省略 */
+    overflow: hidden;
   }
   .author {
-    margin-top: 4px;
+    margin-top: 1px;
     font-weight: 400;
     font-size: 12px;
     line-height: 20px;
     color: #929ca8;
   }
   .price {
-    margin-top: 12px;
+    margin-top: 1px;
     display: flex;
     align-items: flex-end;
     :nth-child(1) {

src/components/common/BookPeruseListCard.vue

@@ -1,33 +1,45 @@
 <template>
-    <div>
-        <el-skeleton style="width: 240px" :loading="true" animated v-if="item.skeleton">
-            <template slot="template">
-                <el-skeleton-item
-                    variant="image"
-                    style="width: 200px; height: 280px;"
-                />
-                <div style="padding: 12px;width: 200px;">
-                    <el-skeleton-item variant="h3" style="width: 100%; height: 22px" />
-                    <el-skeleton-item variant="text" style="margin: 4px 0 12px 0; height: 16px; width:50%;" />
-                    <el-skeleton-item variant="text" style="height: 21px; width:70%;" v-if="!type||type!='bookShelf'" />
-                </div>
-            </template>
-        </el-skeleton>
-        <div class="BookCard" @click="handleLink" v-else>
-            <!-- <div
+  <div>
+    <el-skeleton
+      style="width: 240px"
+      :loading="true"
+      animated
+      v-if="item.skeleton"
+    >
+      <template slot="template">
+        <el-skeleton-item variant="image" style="width: 200px; height: 280px" />
+        <div style="padding: 12px; width: 200px">
+          <el-skeleton-item variant="h3" style="width: 100%; height: 22px" />
+          <el-skeleton-item
+            variant="text"
+            style="margin: 4px 0 12px 0; height: 16px; width: 50%"
+          />
+          <el-skeleton-item
+            variant="text"
+            style="height: 21px; width: 70%"
+            v-if="!type || type != 'bookShelf'"
+          />
+        </div>
+      </template>
+    </el-skeleton>
+    <div class="BookCard" @click="handleLink" v-else>
+      <!-- <div
             class="image"
             :style="{height:height?height:'280px'}"
             ></div> -->
-            <span class="isNew" v-if="item.is_new&&item.is_new==='true'">NEW</span>
-            <span class="isReservation">订阅</span>
-            <el-image
-                class="image"
-                :src="require('../../assets/cover-order-jingdu.png')"
-                :fit="'cover'">
-            </el-image>
-            <div class="bottom">
-            <p class="name">精读课堂·{{item.study_phase_name}}</p>
-            <!-- <template>
+      <span class="isNew" v-if="item.is_new && item.is_new === 'true'"
+        >NEW</span
+      >
+      <span class="isReservation">订阅</span>
+      <el-image
+        class="image"
+        :src="require('../../assets/cover-order-jingdu.png')"
+        :fit="'cover'"
+      >
+      </el-image>
+      <div class="bottom">
+        <p class="name">精读课堂·{{ item.study_phase_name }}</p>
+        <!-- <template>
                 <el-rate
                 v-model="item.score"
                 disabled
@@ -37,105 +49,123 @@
                 >
                 </el-rate>
             </template> -->
-            <p class="author">有效期：{{item.end_date||'暂无'}}</p>
-            <template v-if="!type||type!='bookShelf'">
-                <p class="price">
-                <span class="OPPOSans">￥{{item.hasOwnProperty('price_discount')?item.price_discount:item.price|cutMoneyFiter}}</span>
-                <s v-if="item.hasOwnProperty('price_discount')&&item.price_discount!==item.price">￥{{item.price|cutMoneyFiter}}</s>
-                </p>
-            </template>
-            </div>
-        </div> 
+        <p class="author">有效期：{{ item.end_date || "暂无" }}</p>
+        <template v-if="!type || type != 'bookShelf'">
+          <p class="price">
+            <span class="OPPOSans"
+              >￥{{
+                item.hasOwnProperty("price_discount")
+                  ? item.price_discount
+                  : item.price | cutMoneyFiter
+              }}</span
+            >
+            <s
+              v-if="
+                item.hasOwnProperty('price_discount') &&
+                item.price_discount !== item.price
+              "
+              >￥{{ item.price | cutMoneyFiter }}</s
+            >
+          </p>
+        </template>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-import { cutMoneyFiter } from '@/utils/defined';
+import { cutMoneyFiter } from "@/utils/defined";
 import { getLogin } from "@/api/ajax";
 export default {
   name: "BookCard",
   //import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["item", "height","type","LoginNavIndex","userBg","headerBorder","headerBg","previousPage","isBuy"],
-  filters:{
-    cutMoneyFiter
+  props: [
+    "item",
+    "height",
+    "type",
+    "LoginNavIndex",
+    "userBg",
+    "headerBorder",
+    "headerBg",
+    "previousPage",
+    "isBuy",
+  ],
+  filters: {
+    cutMoneyFiter,
   },
   data() {
     //这里存放数据
     return {
-      goodsTypeList:{
-        0:{
-            type: 'LB'
+      goodsTypeList: {
+        0: {
+          type: "LB",
         },
-        2:{
-            type: 'baozhi'
-        }
-      }
-    }
+        2: {
+          type: "baozhi",
+        },
+      },
+    };
   },
   //计算属性 类似于data概念
   computed: {
     score() {
-      return this.item.score.toFixed(1)
-    }
+      return this.item.score.toFixed(1);
+    },
   },
   //监控data中数据变化
   watch: {},
   //方法集合
   methods: {
-    async handleLink(){
-        let url  = this.LoginNavIndex +'&&&1&&&2&&&3&&&' + this.previousPage
-        if(this.LoginNavIndex===1){
-            let MethodName = "/ShopServer/Client/BookshelfQuery/SetMyValidPeriodIsLooked_IRead";
-            let data = {
-                study_phase: this.item.study_phase,
-                end_date: this.item.end_date
-            }
-            await getLogin(MethodName, data)
-            .then((res) => {
-                if(res.status===1){
-                    
-                }
-            })
-            .catch(() => {
-                
-            }); 
-        }
-        this.$router.push({
-            path: "/bookStore/all",
-            query: {
-                name: encodeURIComponent('我的订阅'),
-                type: 'jingdu',
-                from: this.item.study_phase
+    async handleLink() {
+      let url = this.LoginNavIndex + "&&&1&&&2&&&3&&&" + this.previousPage;
+      if (this.LoginNavIndex === 1) {
+        let MethodName =
+          "/ShopServer/Client/BookshelfQuery/SetMyValidPeriodIsLooked_IRead";
+        let data = {
+          study_phase: this.item.study_phase,
+          end_date: this.item.end_date,
+        };
+        await getLogin(MethodName, data)
+          .then((res) => {
+            if (res.status === 1) {
             }
-        });
-    }
+          })
+          .catch(() => {});
+      }
+      this.$router.push({
+        path: "/bookStore/all",
+        query: {
+          name: encodeURIComponent("我的订阅"),
+          type: "jingdu",
+          from: this.item.study_phase,
+        },
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     // let data = this.changeData(this.dataContext)
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
@@ -160,7 +190,7 @@ export default {
     font-weight: 400;
     font-size: 14px;
     line-height: 22px;
-    color: #2F3742;
+    color: #2f3742;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -170,7 +200,7 @@ export default {
     font-weight: 400;
     font-size: 12px;
     line-height: 20px;
-    color: #929CA8;
+    color: #929ca8;
   }
   .price {
     margin-top: 12px;
@@ -180,16 +210,16 @@ export default {
       font-weight: 700;
       font-size: 14px;
       line-height: 22px;
-      color: #EC5E41;
+      color: #ec5e41;
     }
     :nth-child(2) {
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
       text-decoration-line: line-through;
-      color: #929CA8;
+      color: #929ca8;
       margin-left: 8px;
     }
   }
 }
-</style>
+</style>

src/views/bookShelf/bookItem.vue

@@ -1363,6 +1363,7 @@ export default {
   display: flex;
   gap: 24px 36px;
   flex-flow: wrap;
+  width: 100%;
 }
 </style>
 <style lang="scss">

src/views/bookShelf/components/CourseList.vue

@@ -1,12 +1,22 @@
 <template>
   <ul class="courseList">
-    <li v-for="(item,index) in data" :key="index" :class="[index===data.length-1?'noborder':'',isBuy||index<1?'buy':'']" @click="handleLink(item,isBuy||index<1,index)">
-        <span class="number">{{index+1 + '.'}}</span>
-        <b class="title">{{item.name}}</b>
-        <span class="teacher">{{item.teacher_name?'主讲教师 '+item.teacher_name:''}}</span>
-        <span class="time-length">{{item.timeCn}}</span>
-        <i class="el-icon-lock" v-if="!(isBuy||index<1)"></i>
-        <i class="el-icon-arrow-right" v-else></i>
+    <li
+      v-for="(item, index) in data"
+      :key="index"
+      :class="[
+        index === data.length - 1 ? 'noborder' : '',
+        isBuy || index < 1 ? 'buy' : '',
+      ]"
+      @click="handleLink(item, isBuy || index < 1, index)"
+    >
+      <span class="number">{{ index + 1 + "." }}</span>
+      <b class="title">{{ item.name }}</b>
+      <span class="teacher">{{
+        item.teacher_name ? "主讲教师 " + item.teacher_name : ""
+      }}</span>
+      <span class="time-length">{{ item.timeCn }}</span>
+      <i class="el-icon-lock" v-if="!(isBuy || index < 1)"></i>
+      <i class="el-icon-arrow-right" v-else></i>
     </li>
   </ul>
 </template>
@@ -15,120 +25,130 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { getLogin } from "@/api/ajax";
-import { getToken } from '@/utils/auth'
+import { getToken } from "@/utils/auth";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { },
-  props: ["data", "isBuy","LoginNavIndex","userBg","headerBorder","headerBg","cardType"],
+  components: {},
+  props: [
+    "data",
+    "isBuy",
+    "LoginNavIndex",
+    "userBg",
+    "headerBorder",
+    "headerBg",
+    "cardType",
+  ],
   data() {
     //这里存放数据
-    return {
-        
-    }
+    return {};
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {
-
-  },
+  watch: {},
   //方法集合
   methods: {
     // 跳转
-    handleLink(item,flag,index){
-        if(flag){
-            let url  = this.LoginNavIndex +'&&&'+ this.userBg +'&&&'+ this.headerBorder +'&&&'+ this.headerBg
-            // if(getToken()){
-            //     let MethodName = "/CourseServer/Client/ReadingManager/RecordMyPlayLocation_LBCourse";
-            //     let data = {
-            //         cs_item_id: item.id
-            //     }
-            //     getLogin(MethodName, data)
-            //     .then((res) => {
-            //         if(res.status === 1){
-            //             this.$router.push({
-            //                 path: this.cardType===1?"/courseDetail":"/videoDetail",
-            //                 query: {
-            //                     headerConfig: encodeURIComponent(url),
-            //                     index: index,
-            //                     id: this.$route.query.id?this.$route.query.id:''
-            //                 },
-            //             });
-            //         }
-            //     })
-            // }else{
-                this.$router.push({
-                    path: this.cardType===1?"/courseDetail":"/videoDetail",
-                    query: {
-                        headerConfig: encodeURIComponent(url),
-                        index: index,
-                        id: this.$route.query.id?this.$route.query.id:''
-                    },
-                });
-            // }
-        }
-    }
+    handleLink(item, flag, index) {
+      if (flag) {
+        let url =
+          this.LoginNavIndex +
+          "&&&" +
+          this.userBg +
+          "&&&" +
+          this.headerBorder +
+          "&&&" +
+          this.headerBg;
+        // if(getToken()){
+        //     let MethodName = "/CourseServer/Client/ReadingManager/RecordMyPlayLocation_LBCourse";
+        //     let data = {
+        //         cs_item_id: item.id
+        //     }
+        //     getLogin(MethodName, data)
+        //     .then((res) => {
+        //         if(res.status === 1){
+        //             this.$router.push({
+        //                 path: this.cardType===1?"/courseDetail":"/videoDetail",
+        //                 query: {
+        //                     headerConfig: encodeURIComponent(url),
+        //                     index: index,
+        //                     id: this.$route.query.id?this.$route.query.id:''
+        //                 },
+        //             });
+        //         }
+        //     })
+        // }else{
+        this.$router.push({
+          path: this.cardType === 1 ? "/courseDetail" : "/videoDetail",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            index: index,
+            id: this.$route.query.id ? this.$route.query.id : "",
+          },
+        });
+        // }
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-ul{
-    list-style: none;
-    padding: 0;
-    margin: 0;
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
-.courseList{
-    li{
-        padding: 16px;
-        border-bottom: 1px solid #E5E6EB;
-        font-size: 16px;
-        line-height: 24px;
-        color: #2F3742;
-        display: flex;
-        align-items: center;
-        &.noborder{
-            border: none;
-        }
-        &.buy{
-            cursor: pointer;
-        }
-        .number{
-            width: 27px;
-        }
-        .title{
-            font-weight: 400;
-            margin-right: 16px;
-        }
-        .teacher,.time-length{
-            flex: 1;
-            color: #929CA8;
-            margin-right: 16px;
-        }
-        .time-length{
-            flex: initial;
-        }
+.courseList {
+  flex: 1;
+  li {
+    padding: 16px;
+    border-bottom: 1px solid #e5e6eb;
+    font-size: 16px;
+    line-height: 24px;
+    color: #2f3742;
+    display: flex;
+    align-items: center;
+    &.noborder {
+      border: none;
+    }
+    &.buy {
+      cursor: pointer;
+    }
+    .number {
+      width: 27px;
+    }
+    .title {
+      font-weight: 400;
+      margin-right: 16px;
+    }
+    .teacher,
+    .time-length {
+      flex: 1;
+      color: #929ca8;
+      margin-right: 16px;
+    }
+    .time-length {
+      flex: initial;
     }
+  }
 }
-</style>
+</style>

src/views/bookShelf/components/TreeList.vue

@@ -1,12 +1,27 @@
 <template>
   <ul class="treeList">
-    <li v-for="(item,index) in data" :key="index">
-        <p class="parent-node"><span class="number">{{index+1}}</span><b class="title">{{item.chn_name}}</b></p>
-        <ul v-if="item.arts&&item.arts.length>0">
-            <li :class="[isBuy||index===0?'children-buy':'children-no','children']" v-for="(items,indexs) in item.arts" :key="indexs" @click="handleLink(items,isBuy||index===0,index)">
-                <p class="children-node"><span class="number">{{indexs+1}}</span><b class="title">{{items.art_title}}</b><i class="el-icon-lock" v-if="!(isBuy||index===0)"></i></p>
-            </li>
-        </ul>
+    <li v-for="(item, index) in data" :key="index">
+      <p class="parent-node">
+        <span class="number">{{ index + 1 }}</span
+        ><b class="title">{{ item.chn_name }}</b>
+      </p>
+      <ul v-if="item.arts && item.arts.length > 0">
+        <li
+          :class="[
+            isBuy || index === 0 ? 'children-buy' : 'children-no',
+            'children',
+          ]"
+          v-for="(items, indexs) in item.arts"
+          :key="indexs"
+          @click="handleLink(items, isBuy || index === 0, index)"
+        >
+          <p class="children-node">
+            <span class="number">{{ indexs + 1 }}</span
+            ><b class="title">{{ items.art_title }}</b
+            ><i class="el-icon-lock" v-if="!(isBuy || index === 0)"></i>
+          </p>
+        </li>
+      </ul>
     </li>
   </ul>
 </template>
@@ -17,187 +32,195 @@
 import { getLogin } from "@/api/ajax";
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { },
-  props: ["data", "isBuy","LoginNavIndex","userBg","headerBorder","headerBg","cardType"],
+  components: {},
+  props: [
+    "data",
+    "isBuy",
+    "LoginNavIndex",
+    "userBg",
+    "headerBorder",
+    "headerBg",
+    "cardType",
+  ],
   data() {
     //这里存放数据
-    return {
-        
-    }
+    return {};
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {
-
-  },
+  watch: {},
   //方法集合
   methods: {
     // 跳转
-    async handleLink(item,flag,index){
-        if(!flag){
-            return
-        }
-        let url  = this.LoginNavIndex +'&&&'+ this.userBg +'&&&'+ this.headerBorder +'&&&'+ this.headerBg
-        if(this.cardType==='baozhi'){
-            let MethodName = "/PaperServer/Client/Issue/SaveLastReadArtInIss";
-            let data = {
-                iss_id: this.$route.query.id,
-                art_id: item.id
-            }
-            await getLogin(MethodName, data)
-            .then((res) => {
-            })
-            this.$router.push({
-                path: "/articleDetail",
-                query: {
-                    headerConfig: encodeURIComponent(url),
-                    id: item.id,
-                    iss_id: this.$route.query.id
-                },
-                
-            });
-        }else{
-            this.$router.push({
-                path: "/magazineDetail",
-            });
-        }
-        
-        // if(index===0){
-        //     this.$router.push({
-        //         path: "/articleDetail",
-        //         type:index
-        //     });
-        // }else if(index===1){
-        //     this.$router.push({
-        //         path: "/magazineDetail",
-        //     });
-        // }else if(index===2){
-        //     this.$router.push({
-        //         path: "/videoDetail",
-        //         query: {
-        //             headerConfig: encodeURIComponent(url)
-        //         },
-        //     });
-        // }else if(index===3){
-        //     this.$router.push({
-        //         path: "/courseDetail",
-        //         query: {
-        //             headerConfig: encodeURIComponent(url)
-        //         },
-        //     });
-        // }
-        // if(flag){
-        //     let url  = this.LoginNavIndex +'&&&'+ this.userBg +'&&&'+ this.headerBorder +'&&&'+ this.headerBg
-        //     this.$router.push({
-        //         path: "/courseDetail",
-        //         query: {
-        //             headerConfig: encodeURIComponent(url)
-        //         },
-        //     });
-        // }
-    }
+    async handleLink(item, flag, index) {
+      if (!flag) {
+        return;
+      }
+      let url =
+        this.LoginNavIndex +
+        "&&&" +
+        this.userBg +
+        "&&&" +
+        this.headerBorder +
+        "&&&" +
+        this.headerBg;
+      if (this.cardType === "baozhi") {
+        let MethodName = "/PaperServer/Client/Issue/SaveLastReadArtInIss";
+        let data = {
+          iss_id: this.$route.query.id,
+          art_id: item.id,
+        };
+        await getLogin(MethodName, data).then((res) => {});
+        this.$router.push({
+          path: "/articleDetail",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            id: item.id,
+            iss_id: this.$route.query.id,
+          },
+        });
+      } else {
+        this.$router.push({
+          path: "/magazineDetail",
+        });
+      }
+
+      // if(index===0){
+      //     this.$router.push({
+      //         path: "/articleDetail",
+      //         type:index
+      //     });
+      // }else if(index===1){
+      //     this.$router.push({
+      //         path: "/magazineDetail",
+      //     });
+      // }else if(index===2){
+      //     this.$router.push({
+      //         path: "/videoDetail",
+      //         query: {
+      //             headerConfig: encodeURIComponent(url)
+      //         },
+      //     });
+      // }else if(index===3){
+      //     this.$router.push({
+      //         path: "/courseDetail",
+      //         query: {
+      //             headerConfig: encodeURIComponent(url)
+      //         },
+      //     });
+      // }
+      // if(flag){
+      //     let url  = this.LoginNavIndex +'&&&'+ this.userBg +'&&&'+ this.headerBorder +'&&&'+ this.headerBg
+      //     this.$router.push({
+      //         path: "/courseDetail",
+      //         query: {
+      //             headerConfig: encodeURIComponent(url)
+      //         },
+      //     });
+      // }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-ul{
-    list-style: none;
-    padding: 0;
-    margin: 0;
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
-p{
-    margin: 0;
+p {
+  margin: 0;
 }
-.treeList{
-    .parent-node{
-        display: flex;
-        align-items: center;
-        margin-bottom: 16px;
-        .number{
-            width: 26px;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-            color: #2F3742;
-        }
-        .title{
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-            color: #2F3742;
-        }
+.treeList {
+  width: 100%;
+  .parent-node {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    .number {
+      width: 26px;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: #2f3742;
     }
-    ul{
-        margin-bottom: 16px;
-        .children{
-            padding: 0 32px;
-            border-radius: 4px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            margin-bottom: 4px;
-            &-buy{
-                .number,.title{
-                    color: #2F3742;
-                }
-            }
-            &-no{
-                .number,.title{
-                    color: #929CA8;
-                }
-            }
-            &-buy:hover{
-                background: #E5E6EB;
-                cursor: pointer;
-            }
-            &-node{
-                display: flex;
-                width: 100%;
-                align-items: center;
-            }
-            .number{
-                width: 24px;
-            }
-            .title{
-                flex: 1;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .number,.title{
-                font-weight: 400;
-                font-size: 16px;
-                line-height: 24px;
-            }
-            .el-icon-lock{
-                height: 16px;
-                color: #929CA8;
-            }
+    .title {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: #2f3742;
+    }
+  }
+  ul {
+    margin-bottom: 16px;
+    .children {
+      padding: 0 32px;
+      border-radius: 4px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 4px;
+      &-buy {
+        .number,
+        .title {
+          color: #2f3742;
         }
-
+      }
+      &-no {
+        .number,
+        .title {
+          color: #929ca8;
+        }
+      }
+      &-buy:hover {
+        background: #e5e6eb;
+        cursor: pointer;
+      }
+      &-node {
+        display: flex;
+        width: 100%;
+        align-items: center;
+      }
+      .number {
+        width: 24px;
+      }
+      .title {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .number,
+      .title {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      .el-icon-lock {
+        height: 16px;
+        color: #929ca8;
+      }
     }
+  }
 }
-</style>
+</style>