订单块

li-guang

2020-12-17 06cd51f34f3a51e6ff848ae5b695a46dfc424200

 hive-app/pages/mine/knowledge.vue

@@ -1,20 +1,23 @@
<template>
   <!-- 知识库 -->
   <view class="container flex">
      <!-- #ifndef H5 -->
      <view class="status_bar"></view>
      <!-- #endif -->
      <scroll-view class="list-left" scroll-y>
         <view v-for="(item,index) in list" class="list-left-row">
            <text @click="show(item)">{{item.primaryTitle}}</text>
            <view v-for="(sub,index) in item.subTitle" v-show="item.isShow" class="list-left-row-item" @click="selectItem(index)" :class="index==select?'select-item':''">
         <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="activeIndex==index?'active':''">
            <text class="font-14 gray"  @click="show(item)">{{item.primaryTitle}}</text>
            <!-- <view v-for="(sub,index) in item.subTitle" v-show="item.isShow" class="list-left-row-item" @click="selectItem(index)" :class="index==select?'select-item':''">
               {{sub}}
            </view>
            </view> -->
         </view>
      </scroll-view>
      <scroll-view class="list-right" scroll-y>
         <view class="flex align-center list-right-row">
            <image class="list-right-img ml-10" mode="aspectFit" src="../../static/images/head-img.jpg"></image>
            <view class="flex flex-v ml-10">
               <text class="overflow-nowrap">我是文章的标题</text>
               <text class="overflow-omit">我是文章的内容我是文章的内容我是文章的内容我是文章的内容</text>
               <text class="overflow-nowrap font-14">我是文章的标题</text>
               <text class="overflow-omit font-14">我是文章的内容我是文章的内容我是文章的内容我是文章的内容</text>
            </view>
         </view>
      </scroll-view>
@@ -37,7 +40,8 @@
                  isShow:false
               }
            ],
            select:'0'
            select:'0',
            activeIndex:'0'
         }
      },
      methods:{
@@ -47,23 +51,33 @@
         },
         selectItem(index){
            this.select=index
         },
         active(index){
            this.activeIndex=index
         }
      }
   }
</script>

<style>
   page{
      height: 100%;
   }
   .container{
      padding: 0 10px;
      height: 100%;
      padding: 10px 0 0;
      box-sizing: border-box;
   }
   .list-left{
      /* width: 100px; */
      width: 25%;
      width: 30%;
      height: 100%;
      text-align: center;
      background: #F6F6F8;
      border-radius: 4px;
		
   }
   .list-left-row{
      padding: 0 10px;
      margin-top: 10px;
      padding: 10px 10px;
      font-size: 16px;
      display: flex;
      flex-direction: column;
@@ -73,22 +87,31 @@
      width: 80px;
      margin-top: 8px;
      font-size: 14px;
      color: ;
   }
   .select-item{
      background: red;
      border-radius: 20px;
      color: #FFFFFF;
   }
   .active{
      background: #FFFFFF;
      color: #000000;
   }
   .list-right{
      width: 75%;
      width: 70%;
      text-align: center;
      padding: 0px 10px;
   }
   .list-right-row{
      border-left: 1px solid #ABB1CC;
      border-bottom: 1px solid #ABB1CC;
      border: 1px solid #EDEAF4;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      border-radius: 4px;
      padding: 10px;
   }
   .list-right-img{
      width: 200px;
      height: 100px;
      width: 150px;
      height: 80px;
   }
   
   /* 超过两行显示省略号 */