hive-app/App.vue
@@ -15,5 +15,6 @@ <style> /*每个页面公共css */ @import url("./common/styles/index"); @import url("//at.alicdn.com/t/font_2263696_mnf8362pruj.css"); @import url("//at.alicdn.com/t/font_2263696_xlpr6igc2y.css"); @import url("./static/iconfont/iconfont.css"); </style> hive-app/common/styles/index.css
@@ -132,6 +132,12 @@ .justify-between{ justify-content: space-between; } .justify-center{ justify-content: center; } .justify-start{ justify-content: flex-start; } .justify-around{ justify-content: space-around; } @@ -147,3 +153,11 @@ .right{ text-align: end; } /* 默认蓝色按钮 */ .blue-btn{ background: #518EFF; border: 0; color: #FFFFFF; font-size: 16px; } hive-app/pages.json
@@ -36,6 +36,49 @@ "scrollIndicator": "none" } } }, { "path": "pages/member/detail", "style": { "navigationBarTitleText": "", "navigationBarBackgroundColor":"#518EFF", "app-plus":{ "scrollIndicator": "none", "titleNView": { "buttons": [ { "text": "\ue696", "fontSrc": "/static/iconfont/iconfont.ttf", "fontSize": "18px", "width":"25px", "float":"right" } ] } } } }, { "path": "pages/mine/setting", "style": { "navigationBarTitleText": "设置", "navigationBarBackgroundColor":"#FFFFFF", "navigationBarTextStyle":"black", "app-plus":{ "scrollIndicator": "none" } } }, { "path": "pages/mine/knowledge", "style": { "navigationBarTitleText": "知识库", "navigationBarBackgroundColor":"#FFFFFF", "navigationBarTextStyle":"black", "app-plus":{ "scrollIndicator": "none" } } } ], "globalStyle": { hive-app/pages/member/detail.vue
New file @@ -0,0 +1,123 @@ <template> <!-- 会员详情 --> <view> <!-- #ifndef H5 --> <view class="status_bar"></view> <!-- #endif --> <view class="header flex flex-v align-center"> <image class="header-img" src="../../static/images/head-img.jpg"></image> <text class="font-18 white mt-5">333</text> <text class="font-14 white mt-5">会员编号: 101010</text> <text class="font-12 white mt-5">湖南 长沙 22</text> <view class="flex align-center mt-10"> <view class="icon-box flex justify-center align-center mr-20"> <text class="icon iconfont icondianhua blue"></text> </view> <view class="icon-box flex justify-center align-center"> <text class="icon iconfont iconxinxiduanxinsixinduihua blue"></text> </view> </view> </view> <view class="content"> <view class="content-row flex justify-around mt-10"> <view class="flex flex-v align-center"> <text class="font-18 red">600.00</text> <text class="font-14 mt-10">余额</text> </view> <view class="flex flex-v align-center"> <text class="font-18 green">600.00</text> <text class="font-14 mt-10">赠送余额</text> </view> <view class="flex flex-v align-center"> <text class="font-18 blue">600.00</text> <text class="font-14 mt-10">累计消费</text> </view> </view> <view class="content-row mt-10"> <view class="flex"> <view class="detail-item flex flex-v align-center justify-center"> <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail1.png"></image> <text class="font-14 mt-5">会员信息</text> </view> <view class="detail-item flex flex-v align-center justify-center"> <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail2.png"></image> <text class="font-14 mt-5">项目/套餐</text> </view> <view class="detail-item flex flex-v align-center justify-center"> <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail3.png"></image> <text class="font-14 mt-5">卡项</text> </view> <view class="detail-item flex flex-v align-center justify-center"> <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail4.png"></image> <text class="font-14 mt-5">皮肤监测</text> </view> </view> <view class="flex justify-start mt-20"> <view class="detail-item flex flex-v align-center justify-center"> <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail5.png"></image> <text class="font-14 mt-5">消费记录</text> </view> <view class="detail-item flex flex-v align-center justify-center"> <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail6.png"></image> <text class="font-14 mt-5">服务记录</text> </view> <view class="detail-item flex flex-v align-center justify-center"> <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail7.png"></image> <text class="font-14 mt-5">跟进记录</text> </view> </view> </view> </view> </view> </template> <script> </script> <style> .status_bar{ background: #518EFF; color: #FFFFFF; } .header{ background: #518EFF; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 15px; } .header-img{ width: 80px; height: 80px; border-radius: 50%; } .icon-box{ width: 28px; height: 28px; background: #FFFFFF; border-radius: 50%; } .icon{ font-size: 18px; } .content{ padding: 0 10px; } .content-row{ border: 1px solid #EDEAF4; background: #FFFFFF; padding: 15px 0; border-radius: 4px; box-shadow:0 6px 6px rgba(237,234,244,0.5); } .detail-item{ width: 25%; } .detail-icon-box{ width: 32px; height: 32px; } .detail-icon{ width: 32px; height: 32px; } </style> hive-app/pages/member/index.vue
@@ -21,7 +21,7 @@ <text class="sort-tab-item">潜在客户</text> <text class="sort-tab-item">潜在客户</text> </view> <view class="flex justify-between"> <view class="flex justify-between" @click="toDetail"> <view class="flex-1 mr-10"> <view class="member-list flex align-center" v-for="(item, index) in 15"> <text class="first-name" :style="{background: caculateBgcolor(index)}">李</text> @@ -58,6 +58,11 @@ methods:{ caculateBgcolor(index){ return this.colors[index%8]; }, toDetail(){ uni.navigateTo({ url:'./detail' }) } } } hive-app/pages/mine/index.vue
@@ -5,7 +5,7 @@ <view class="status_bar"></view> <!-- #endif --> <view class="header"> <view class="icon white iconfont iconshezhi right"></view> <view class="icon white iconfont iconshezhi right" @click="linkTo('./setting')"></view> <view class="flex align-center"> <image class="header-img ml-15" src="../../static/images/head-img.jpg"></image> <view class="flex flex-v ml-20"> @@ -77,7 +77,7 @@ </view> </view> </view> <view class="flex align-center justify-between repository mt-20"> <view class="flex align-center justify-between repository mt-20" @click="linkTo('./knowledge')"> <view class="flex align-center"> <image class="title-img mr-10" src="../../static/images/mine2.png"></image> <text>知识库</text> @@ -117,7 +117,11 @@ } }, methods: { linkTo(val){ uni.navigateTo({ url:val }) } } } </script> @@ -128,7 +132,6 @@ color: #FFFFFF; } .header{ height: 100px; background: #518EFF; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; hive-app/pages/mine/knowledge.vue
New file @@ -0,0 +1,48 @@ <template> <!-- 知识库 --> <view> <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"> {{sub}} </view> </view> </scroll-view> <scroll-view class="list-right"></scroll-view> </view> </template> <script> export default{ data(){ return{ primaryTitle:['院装产品','美容套餐','美容客装','美容试装'], subTitle:['院装产品','院装产品','院装产品','院装产品'], list:[ { primaryTitle:'院装产品', subTitle:['院装产品','院装产品','院装产品','院装产品'], isShow:false }, { primaryTitle:'美容套餐', subTitle:['美容套餐','美容套餐','美容套餐','美容套餐'], isShow:false } ], } }, methods:{ show(item){ item.isShow=!item.isShow } } } </script> <style> .list-left{ width: 100px; } </style> hive-app/pages/mine/setting.vue
New file @@ -0,0 +1,26 @@ <template> <!-- 设置 --> <view class="container"> <!-- #ifndef H5 --> <view class="status_bar"></view> <!-- #endif --> <view class="flex justify-between content-row mb-20"> <text class="font-16">修改密码</text> <text class="iconfont iconarrow-backimg gray"></text> </view> <button class="blue-btn">退出登录</button> </view> </template> <script> </script> <style> .container:first-child{ border-top: 1px solid #ABB1CC; } .content-row{ padding: 10px 15px; border-bottom: 1px solid #ABB1CC; } </style> hive-app/static/iconfont/iconfont.css
New file @@ -0,0 +1,50 @@ @font-face { font-family: 'iconfont'; /* project id 2263696 */ src: url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.eot'); src: url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.eot?#iefix') format('embedded-opentype'), url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.woff2') format('woff2'), url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.woff') format('woff'), url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.ttf') format('truetype'), url('https://at.alicdn.com/t/font_2263696_mnf8362pruj.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .iconarrow-backimg:before { content: "\e601"; } .iconshezhi:before { content: "\e696"; } .iconxiugai:before { content: "\e602"; } .iconjiantou:before { content: "\e618"; } .iconjiantouarrow486:before { content: "\e6aa"; } .iconsaomiao:before { content: "\e60f"; } .iconjiahao:before { content: "\e600"; } .iconsousuo:before { content: "\e6d2"; } Binary files differ
hive-app/static/images/member-detail1.png
