From 3827f7fb0da9843253e7285a920cb1dbed9ca0d7 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Mon, 14 Dec 2020 14:52:17 +0800
Subject: [PATCH] gx
---
hive-app/components/.DS_Store | 0
/dev/null | 0
hive-app/static/images/mine2.png | 0
hive-app/static/images/mine1.png | 0
hive-app/common/styles/index.css | 25 ++
hive-app/pages/workbench/index.vue | 56 ++++--
hive-app/pages/mine/index.vue | 169 ++++++++++++++++++
hive-app/components/popover/index.vue | 13 +
hive-app/components/liuyuno-tabs/liuyuno-tabs.vue | 245 +++++++++++++++++++++++++++
hive-app/static/images/head-img.jpg | 0
10 files changed, 486 insertions(+), 22 deletions(-)
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index 8d035b2..f1cbf2f 100644
--- a/hive-app/common/styles/index.css
+++ b/hive-app/common/styles/index.css
@@ -91,6 +91,24 @@
.dark-gray{
color: #666666;
}
+.red{
+ color:#DE5A5A;
+}
+.green{
+ color:#1FB713;
+}
+.purple{
+ color: #5A73DE;
+}
+.blueness{
+ color: #58C4C0;
+}
+.orange{
+ color: #E89D44;
+}
+.yellow{
+ color: #E6E15F;
+}
.font-dark{
color: #111111;
}
@@ -120,7 +138,12 @@
.block{
display: block;
}
-
.placeholder{
color: #999999;
+}
+.center{
+ text-align: center;
+}
+.right{
+ text-align: end;
}
\ No newline at end of file
diff --git a/hive-app/components/.DS_Store b/hive-app/components/.DS_Store
new file mode 100644
index 0000000..195588b
--- /dev/null
+++ b/hive-app/components/.DS_Store
Binary files differ
diff --git a/hive-app/components/liuyuno-tabs/liuyuno-tabs.vue b/hive-app/components/liuyuno-tabs/liuyuno-tabs.vue
new file mode 100644
index 0000000..3e1f2ae
--- /dev/null
+++ b/hive-app/components/liuyuno-tabs/liuyuno-tabs.vue
@@ -0,0 +1,245 @@
+<template>
+ <view class="_tab-box" :style="{fontSize: defaultConfig.fontSize + 'rpx', color: defaultConfig.color}">
+ <scroll-view id="_scroll" :scroll-x="true" class="scroll-view-h" scroll-with-animation :scroll-left="slider.scrollLeft">
+ <view class="_scroll-content">
+ <view class="_tab-item-box" :class="[defaultConfig.itemWidth ? '_clamp' : '_flex']">
+ <block v-for="(item, index) in tabList" :key="index" >
+ <view
+ class="_item"
+ :id="'_tab_'+index"
+ :class="{ '_active': tagIndex === index }"
+ :style="{color: tagIndex == index ? defaultConfig.activeColor : defaultConfig.color, 'width': defaultConfig.itemWidth ? defaultConfig.itemWidth + 'rpx' : ''}"
+ @click="tabClick(index)">{{ item[defaultConfig.key] || item }}</view>
+ </block>
+ </view>
+ <view class="_underline" :style="{
+ transform: 'translateX(' + slider.left + 'px)',
+ width: slider.width + 'px',
+ height: defaultConfig.underLineHeight + 'rpx',
+ backgroundColor: defaultConfig.underLineColor,
+ }" />
+ </view>
+ </scroll-view>
+ </view>
+</template>
+
+<script>
+ export default {
+ name: 'liuyuno-tabs',
+ props: {
+ tabData: {
+ type: Array,
+ default: () => []
+ },
+ activeIndex: {
+ type: Number,
+ default: 0
+ },
+ config: {
+ type: Object,
+ default:() => {
+ return {}
+ }
+ },
+ },
+ data() {
+ return {
+ tabList: [],
+ tagIndex: 0,
+ slider: {
+ left: 0,
+ width: 0,
+ scrollLeft: 0
+ },
+ scorll: {},
+ defaultConfig: {
+ // 要显示的key
+ key: 'name',
+ // 字体大小 rpx
+ fontSize: 26,
+ // 字体颜色
+ color: '#313131',
+ // 激活字体颜色
+ activeColor: '#e54d42',
+ // item宽度 0为自动
+ itemWidth: 0,
+ // 下划线左右边距，文字宽度加边距 rpx
+ underLinePadding: 10,
+ // 下划线宽度 rpx 注意：设置了此值 underLinePadding 失效
+ underLineWidth: 0,
+ // 下划线高度 rpx
+ underLineHeight: 4,
+ // 下划线颜色
+ underLineHeight: '#e54d42',
+ },
+ };
+ },
+ watch: {
+ tabData(value) {
+ this.updateData();
+ setTimeout(() => {
+ this.updateTabWidth();
+ }, 0);
+ },
+ config(value) {
+ this.updateConfig();
+ },
+ },
+ mounted() {
+ this.updateConfig();
+ this.updateData();
+ this.tagIndex = this.activeIndex;
+
+ this.$nextTick(() => {
+ this.calcScrollPosition();
+ })
+ },
+ methods: {
+ updateData() {
+ let data = [];
+ if (typeof(this.tabData[0])=='string') {
+ this.tabData.forEach((item, index) => {
+ data.push({
+ name: item,
+ })
+ });
+ this.defaultConfig.key = 'name';
+ } else {
+ data = JSON.parse(JSON.stringify(this.tabData));
+ }
+
+ this.tabList = data;
+ },
+ updateConfig() {
+ this.defaultConfig = Object.assign(this.defaultConfig, this.config);
+ },
+ calcScrollPosition() {
+
+ const query = uni.createSelectorQuery().in(this);
+
+ query.select('#_scroll').boundingClientRect((res) => {
+ this.scorll = res;
+ this.updateTabWidth();
+ }).exec();
+ },
+ updateTabWidth(index = 0) {
+ let data = this.tabList;
+
+ if (data.length == 0) return false;
+
+ const query = uni.createSelectorQuery().in(this);
+
+ query.select('#_tab_' + index).boundingClientRect((res) => {
+
+ data[index]._slider = {
+ width: res.width,
+ left: res.left,
+ scrollLeft: res.left - (data[index - 1] ? data[index - 1]._slider.width : 0),
+ };
+
+ if (this.tagIndex == index) {
+ this.tabToIndex(this.tagIndex);
+ }
+
+ index++;
+ if (data.length > index) {
+ this.updateTabWidth(index);
+ }
+ }).exec();
+ },
+
+ tabToIndex(index) {
+
+ let _slider = this.tabList[index]._slider;
+
+ let width = uni.upx2px(this.defaultConfig.underLineWidth);
+
+ if (!width) {
+ if (this.defaultConfig.itemWidth) {
+ width = uni.upx2px(this.defaultConfig.itemWidth);
+ } else {
+ width = this.tabList[index][this.defaultConfig.key].length * uni.upx2px(this.defaultConfig.fontSize);
+ }
+ width += uni.upx2px(this.defaultConfig.underLinePadding) * 2;
+ }
+
+ let scorll_left = this.scorll.left || 0;
+
+ this.slider = {
+ left: _slider.left - scorll_left + (_slider.width - width) / 2,
+ width: width,
+ scrollLeft: _slider.scrollLeft - scorll_left,
+ }
+ },
+
+ tabClick(index) {
+ this.tagIndex = index;
+ this.tabToIndex(index);
+ this.$emit('tabClick', index);
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ ._tab-box {
+ width: 100%;
+ display: flex;
+ font-size: 26rpx;
+ position: relative;
+ height: 90rpx;
+ line-height: 90rpx;
+ z-index: 10;
+ .scroll-view-h{
+ white-space:nowrap;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ ._scroll-content {
+ width: 100%;
+ height: 100%;
+ position:relative;
+
+ ._tab-item-box {
+ height: 100%;
+ &._flex {
+ display: flex;
+ ._item {
+ flex: 1;
+ }
+ }
+ &._clamp {
+ ._item {
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+ }
+ }
+
+
+ ._item {
+ height: 100%;
+ display: inline-block;
+ text-align: center;
+ padding: 0 30rpx;
+ position: relative;
+ text-align: center;
+
+ color: #333;
+ &._active {
+ color: #e54d42;
+ }
+ }
+ }
+ ._underline {
+ height: 4rpx;
+ background-color: #e54d42;
+ border-radius: 6rpx;
+ transition: .5s;
+ position: absolute;
+ bottom: 0;
+ }
+ }
+ }
+ }
+</style>
diff --git a/hive-app/components/popover/index.vue b/hive-app/components/popover/index.vue
index 4c05734..674401e 100644
--- a/hive-app/components/popover/index.vue
+++ b/hive-app/components/popover/index.vue
@@ -1,14 +1,23 @@
<template>
- <view v-show="isShow">
+ <view class="content">
<slot></slot>
</view>
</template>
<script>
export default{
-
+ data(){
+ return{
+ }
+ },
+ methods:{
+ }
}
</script>
<style>
+ .content{
+ background: #4c4c4c;
+ border-radius: 4px;
+ }
</style>
diff --git a/hive-app/pages/mine/index.vue b/hive-app/pages/mine/index.vue
index 94249a0..6ab569a 100644
--- a/hive-app/pages/mine/index.vue
+++ b/hive-app/pages/mine/index.vue
@@ -1,9 +1,178 @@
<template>
<!-- 我的 -->
+ <view class="container">
+ <!-- #ifndef H5 -->
+ <view class="status_bar"></view>
+ <!-- #endif -->
+ <view class="header">
+ <view class="icon white iconfont iconshezhi right"></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">
+ <view>
+ <text class="font-18 white mr-5">222是个帅哥</text>
+ <text class="white icon iconfont iconxiugai"></text>
+ </view>
+ <view class="flex mt-10">
+ <view class="mr-20">
+ <text class="white mr-5 font-14">职位:</text>
+ <text class="white font-14">靓仔</text>
+ </view>
+ <view>
+ <text class="white mr-5 font-14">工号:</text>
+ <text class="white font-14">9527</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <view class="content">
+ <view class="flex align-center performance">
+ <image class="title-img mr-10" src="../../static/images/mine1.png"></image>
+ <text class="font-18">我的业绩</text>
+ </view>
+ <view class="tab-box">
+ <liuyuno-tabs
+ class="tab"
+ :tabData="tabs"
+ :config="{
+ color: '#abb1cc',
+ activeColor: '#518EFF',
+ underLineColor: '#518EFF',
+ underLineHeight: 5,
+ fontSize: 30,
+ itemWidth: 70,
+ underLineWidth: 50,
+ }"
+ />
+ <view class="performance-content">
+ <view class="flex justify-around">
+ <view class="flex flex-v align-center performance-item">
+ <text class="font-16 red">600.00</text>
+ <text class="font-14 mt-5">总现金业绩</text>
+ </view>
+ <view class="flex flex-v align-center performance-item">
+ <text class="font-16 green">600.00</text>
+ <text class="font-14 mt-5">售卡业绩</text>
+ </view>
+ <view class="flex flex-v align-center performance-item">
+ <text class="font-16 purple">600.00</text>
+ <text class="font-14 mt-5">项目业绩</text>
+ </view>
+ </view>
+ <view class="flex justify-around mt-20">
+ <view class="flex flex-v align-center performance-item">
+ <text class="font-16 blueness">600.00</text>
+ <text class="font-14 mt-5">产品业绩</text>
+ </view>
+ <view class="flex flex-v align-center performance-item">
+ <text class="font-16 orange">600.00</text>
+ <text class="font-14 mt-5">余额划扣业绩</text>
+ </view>
+ <view class="flex flex-v align-center performance-item">
+ <text class="font-16 yellow">600.00</text>
+ <text class="font-14 mt-5">服务提成</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="flex align-center justify-between repository mt-20">
+ <view class="flex align-center">
+ <image class="title-img mr-10" src="../../static/images/mine2.png"></image>
+ <text>知识库</text>
+ </view>
+ <text class="icon iconfont iconarrow-backimg gray"></text>
+ </view>
+ </view>
+ </view>
</template>
<script>
+ import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
+ export default {
+ components: {
+ liuyunoTabs
+ },
+ data() {
+ return {
+ tabs:[
+ {
+ state: 1,
+ name: '今日'
+ },
+ {
+ state: 2,
+ name: '昨日'
+ },
+ {
+ state: 3,
+ name: '本月'
+ },
+ {
+ state: 4,
+ name: '上月'
+ },
+ ],
+ }
+ },
+ methods: {
+
+ }
+ }
</script>
<style>
+ .status_bar{
+ background: #518EFF;
+ color: #FFFFFF;
+ }
+ .header{
+ height: 100px;
+ background: #518EFF;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ padding: 15px;
+ }
+ .icon {
+ font-size: 18px;
+ font-family: texticons;
+ }
+ .header-img{
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ }
+ .content{
+ padding: 0 10px;
+ }
+ .performance{
+ padding: 0 3px;
+ margin: 15px 0px 10px;
+ }
+ .title-img{
+ width: 18px;
+ height: 18px;
+ }
+ .tab-box{
+ border: 1px solid #EDEAF4;
+ border-radius: 4px;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ padding: 10px;
+ }
+ .tab{
+ border-bottom: 1px solid #EDEAF4;
+ }
+ .performance-content{
+ padding: 10px 0;
+ }
+ .performance-item{
+ width: 33.3%;
+ }
+ .repository{
+ border: 1px solid #EDEAF4;
+ border-radius: 4px;
+ padding: 10px 3px;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ }
</style>
diff --git a/hive-app/pages/workbench/index.vue b/hive-app/pages/workbench/index.vue
index 963776b..69cc4f7 100644
--- a/hive-app/pages/workbench/index.vue
+++ b/hive-app/pages/workbench/index.vue
@@ -10,17 +10,18 @@
<text class="icon gray iconfont iconsousuo mr-15"></text>
<text class="icon gray iconfont iconjiahao" @click.stop="isShow=!isShow"></text>
</view>
- <view class="popup-content" v-show="isShow">
- <view>
- <text class="icon iconfont iconjiahao mr-5"></text>
- <text>新增会员</text>
- </view>
- <view class="mt-10">
- <text class="icon iconfont iconsaomiao mr-5"></text>
- <text>扫一扫</text>
- </view>
- </view>
</view>
+ <popover class="popup-content" v-show="isShow">
+ <view class="triangle"></view>
+ <view class="popup-item flex align-center">
+ <text class="icon white iconfont iconjiahao mr-5"></text>
+ <text class="white font-14 popup-content-text">新增会员</text>
+ </view>
+ <view class="popup-item flex align-center">
+ <text class="icon white iconfont iconsaomiao mr-5"></text>
+ <text class="white font-14 popup-content-text">扫一扫</text>
+ </view>
+ </popover>
<view class="condition flex justify-between">
<view class="flex flex-v align-center">
<text class="font-17 white">0</text>
@@ -146,7 +147,11 @@
</template>
<script>
+ import popover from "../../components/popover/index.vue"
export default{
+ components:{
+ popover
+ },
data(){
return{
isShow:false
@@ -171,9 +176,6 @@
text-align: center;
font-family: texticons;
}
- page{
- background: #F8F8F8;
- }
.container{
padding: 0 10px;
}
@@ -190,6 +192,7 @@
padding: 15px 0;
border-radius: 4px;
margin: 10px 0;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
}
.title{
font-size: 14px;
@@ -205,12 +208,27 @@
width: 25%;
}
.popup-content{
- background: #FFFFFF;
- border: 1px solid #ABB1CC;
- padding: 10px;
- border-radius: 4px;
position: absolute;
- right: 10px;
- top: 35px;
+ right: 9px;
+ top: 48px;
+ padding-left: 10px;
+ }
+ .triangle{
+ width: 0;
+ height: 0;
+ border-width: 0 10px 10px;
+ border-style: solid;
+ border-color: transparent transparent #4c4c4c;
+ position: absolute;
+ top:-8px;
+ right: 5px;
+ }
+ .popup-content-text{
+ width: 100%;
+ border-bottom: 1px solid gray;
+ padding: 10px 10px 10px 0;
+ }
+ .popup-content .popup-item:nth-last-of-type(1) .popup-content-text{
+ border-bottom: 0;
}
</style>
diff --git a/hive-app/static/images/add.png b/hive-app/static/images/add.png
deleted file mode 100644
index eba290d..0000000
--- a/hive-app/static/images/add.png
+++ /dev/null
Binary files differ
diff --git a/hive-app/static/images/head-img.jpg b/hive-app/static/images/head-img.jpg
new file mode 100644
index 0000000..1cb46d5
--- /dev/null
+++ b/hive-app/static/images/head-img.jpg
Binary files differ
diff --git a/hive-app/static/images/mine1.png b/hive-app/static/images/mine1.png
new file mode 100644
index 0000000..edec691
--- /dev/null
+++ b/hive-app/static/images/mine1.png
Binary files differ
diff --git a/hive-app/static/images/mine2.png b/hive-app/static/images/mine2.png
new file mode 100644
index 0000000..895c1e7
--- /dev/null
+++ b/hive-app/static/images/mine2.png
Binary files differ
diff --git a/hive-app/static/images/search.png b/hive-app/static/images/search.png
deleted file mode 100644
index 4c05e17..0000000
--- a/hive-app/static/images/search.png
+++ /dev/null
Binary files differ
--
Gitblit v1.9.1