From aaa767b2054fdbe7f60b9d1fdc7a8ad3b25d6c90 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Thu, 17 Dec 2020 16:37:31 +0800
Subject: [PATCH] gx
---
hive-app/pages/mine/knowledge.vue | 104 ++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 93 insertions(+), 11 deletions(-)
diff --git a/hive-app/pages/mine/knowledge.vue b/hive-app/pages/mine/knowledge.vue
index d4bc24a..1046a8f 100644
--- a/hive-app/pages/mine/knowledge.vue
+++ b/hive-app/pages/mine/knowledge.vue
@@ -1,15 +1,26 @@
<template>
<!-- 知识库 -->
- <view>
+ <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" @click="show(item)">
- {{item.primaryTitle}}
- <view v-for="sub in item.subTitle" v-show="item.isShow">
+ <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>
+ </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 font-14">我是文章的标题</text>
+ <text class="overflow-omit font-14">我是文章的内容我是文章的内容我是文章的内容我是文章的内容</text>
</view>
</view>
</scroll-view>
- <scroll-view class="list-right"></scroll-view>
</view>
</template>
@@ -17,32 +28,103 @@
export default{
data(){
return{
- primaryTitle:['院装产品','美容套餐','美容客装','美容试装'],
- subTitle:['院装产品','院装产品','院装产品','院装产品'],
list:[
{
primaryTitle:'院装产品',
- subTitle:['院装产品','院装产品','院装产品','院装产品'],
- isShow:false
+ subTitle:['水果','蔬菜'],
+ isShow:false,
},
{
primaryTitle:'美容套餐',
- subTitle:['美容套餐','美容套餐','美容套餐','美容套餐'],
+ subTitle:['水果','蔬菜'],
isShow:false
}
],
+ select:'0',
+ activeIndex:'0'
}
},
methods:{
show(item){
item.isShow=!item.isShow
+ this.select=0
+ },
+ selectItem(index){
+ this.select=index
+ },
+ active(index){
+ this.activeIndex=index
}
}
}
</script>
<style>
+ page{
+ height: 100%;
+ }
+ .container{
+ height: 100%;
+ padding: 10px 0 0;
+ box-sizing: border-box;
+ }
.list-left{
- width: 100px;
+ width: 30%;
+ height: 100%;
+ text-align: center;
+ background: #F6F6F8;
+ border-radius: 4px;
+
+ }
+ .list-left-row{
+ padding: 10px 10px;
+ font-size: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .list-left-row-item{
+ 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: 70%;
+ text-align: center;
+ padding: 0px 10px;
+ }
+ .list-right-row{
+ border: 1px solid #EDEAF4;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ border-radius: 4px;
+ padding: 10px;
+ }
+ .list-right-img{
+ width: 150px;
+ height: 80px;
+ }
+
+ /* 超过两行显示省略号 */
+ .overflow-omit{
+ text-overflow: -o-ellipsis-lastline;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+ /* 只能一行，超出显示省略号 */
+ .overflow-nowrap{
+ white-space:nowrap;
}
</style>
--
Gitblit v1.9.1