个人中心知识库

li-guang

2020-12-15 230fb359b66f850baf8efccf731dcd962c29bf0d

个人中心知识库

 hive-app/common/styles/index.css

@@ -160,4 +160,12 @@
    border: 0;
    color: #FFFFFF;
    font-size: 16px;
}

/* 蓝色边框白底按钮 */
.white-btn{
    background: #FFFFFF;
    border: 1px solid #518EFF;
    color: #518EFF;
    font-size: 16px;
}

 hive-app/pages.json

@@ -43,18 +43,7 @@
                "navigationBarTitleText": "",
                "navigationBarBackgroundColor":"#518EFF",
                "app-plus":{ 
                    "scrollIndicator": "none",
                    "titleNView": {
                        "buttons": [
                            {
                                "text": "\ue696",
                                "fontSrc": "/static/iconfont/iconfont.ttf",
                                "fontSize": "18px",
                                "width":"25px",
                                "float":"right"
                            }
                        ]
                    }
                    "scrollIndicator": "none"
                }
            }
        },

 hive-app/pages/member/detail.vue

@@ -68,6 +68,10 @@
                </view>
            </view>
        </view>
        <view class="flex content-btn justify-around">
            <button class="white-btn btn">开单</button>
            <button class="blue-btn btn">预约</button>
        </view>
    </view>
</template>

@@ -112,12 +116,16 @@
    .detail-item{
        width: 25%;
    }
    .detail-icon-box{
        width: 32px;
        height: 32px;
    }
    .detail-icon{
        width: 32px;
        height: 32px;
        width: 28px;
        height: 28px;
    }
    .content-btn{
        position: absolute;
        bottom: 15px;
        width: 100%;
    }
    .btn{
        width: 45%;
    }
</style>

 hive-app/pages/mine/knowledge.vue

@@ -1,15 +1,23 @@
<template>
    <!-- 知识库 -->
    <view>
    <view class="container flex">
        <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">
                <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':''">
                    {{sub}}
                </view>
            </view>
        </scroll-view>
        <scroll-view class="list-right"></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>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

@@ -17,32 +25,83 @@
    export default{
        data(){
            return{
                primaryTitle:['院装产品','美容套餐','美容客装','美容试装'],
                subTitle:['院装产品','院装产品','院装产品','院装产品'],
                list:[
                    {
                        primaryTitle:'院装产品',
                        subTitle:['院装产品','院装产品','院装产品','院装产品'],
                        isShow:false
                        subTitle:['水果','蔬菜'],
                        isShow:false,
                    },
                    {
                        primaryTitle:'美容套餐',
                        subTitle:['美容套餐','美容套餐','美容套餐','美容套餐'],
                        subTitle:['水果','蔬菜'],
                        isShow:false
                    }
                ],
                select:'0'
            }
        },
        methods:{
            show(item){
                item.isShow=!item.isShow
                this.select=0
            },
            selectItem(index){
                this.select=index
            }
        }
    }
</script>

<style>
    .container{
        padding: 0 10px;
    }
    .list-left{
        width: 100px;
        /* width: 100px; */
        width: 25%;
        text-align: center;
    }
    .list-left-row{
        padding: 0 10px;
        margin-top: 10px;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .list-left-row-item{
        width: 80px;
        margin-top: 8px;
        font-size: 14px;
    }
    .select-item{
        background: red;
        border-radius: 20px;
        color: #FFFFFF;
    }
    .list-right{
        width: 75%;
    }
    .list-right-row{
        border-left: 1px solid #ABB1CC;
        border-bottom: 1px solid #ABB1CC;
    }
    .list-right-img{
        width: 200px;
        height: 100px;
    }
	
    /* 超过两行显示省略号 */
    .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>