hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工作台页面头部开发

Browse Source
This commit is contained in:
gcd 2025-03-26 18:11:41 +08:00
parent e0f316f278
commit 05979c090d
5 changed files with 160 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/me-top/me-top.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<view class="me-top">
<view class="status-bar" :style="{height: inject('globalData').statusBarH+'px'}"></view>
<view class="capsule flex-c" :style="{height: inject('globalData').customBarH - inject('globalData').statusBarH+'px'}">
<view class="icon-ctr flex-c">
<image class="icon" mode="aspectFill" :src="inject('globalData').appIcon"></image>
</view>
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script setup>
import {inject} from 'vue'
const props = defineProps({
//标题
title: {
type: String,
required: true,
}
});
</script>
<style lang="scss" scoped>
.me-top {
.capsule {
.icon-ctr {
width: 60rpx;
height: 60rpx;
border: 1px solid #E9F1FE;
border-radius: 50%;
position: absolute;
left: 0;
.icon {
width: 80%;
height: 80%;
border-radius: 50%;
}
}
.title {
font-weight: 500;
font-size: 32rpx;
color: var(--titleColor);
margin-left: -60rpx;
}
}
}
</style>

15
pages.json
View File

@ -1,5 +1,13 @@
{ {
"pages": [ "pages": [
{
"path" : "pages/workbench/workbench",
"style" :
{
"navigationBarTitleText" : "",
"navigationStyle": "custom"
}
},
{ {
"path" : "pages/index/index", "path" : "pages/index/index",
"style" : "style" :
@ -16,13 +24,6 @@
"disableScroll": true "disableScroll": true
} }
}, },
{
"path" : "pages/workbench/workbench",
"style" :
{
"navigationBarTitleText" : "工作台"
}
},
{ {
"path" : "pages/user/user", "path" : "pages/user/user",
"style" : "style" :

30
pages/index/index.vue
View File

@ -1,13 +1,7 @@
<template> <template>
<view class="ctr"> <view class="ctr">
<view class="fixed-top"> <view class="fixed-top">
<view class="status-bar" :style="{height: data.globalData.statusBarH+'px'}"></view> <me-top title="接单大厅"></me-top>
<view class="capsule flex-c" :style="{height: data.globalData.customBarH - data.globalData.statusBarH+'px'}">
<view class="icon-ctr flex-c">
<image class="icon" mode="aspectFill" :src="data.globalData.appIcon"></image>
</view>
<text class="title">接单大厅</text>
</view>
</view> </view>
<me-empty-space :height="listMarginTop"></me-empty-space> <me-empty-space :height="listMarginTop"></me-empty-space>
@ -117,6 +111,7 @@ import {ref, reactive, computed, watch, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon"; import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button"; import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue"; import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeTop from "../../components/me-top/me-top.vue";
const data = reactive({ const data = reactive({
globalData: {}, globalData: {},
}) })
@ -138,27 +133,6 @@ const listMarginTop = computed(() => {
top: 0; top: 0;
background-color: var(--pageBgColor); background-color: var(--pageBgColor);
width: 100%; width: 100%;
.capsule {
.icon-ctr {
width: 60rpx;
height: 60rpx;
border: 1px solid #E9F1FE;
border-radius: 50%;
position: absolute;
left: 0;
.icon {
width: 80%;
height: 80%;
border-radius: 50%;
}
}
.title {
font-weight: 500;
font-size: 32rpx;
color: var(--titleColor);
margin-left: -60rpx;
}
}
} }
.list { .list {
.item { .item {

103
pages/workbench/workbench.vue
View File

@ -1,22 +1,99 @@
<template> <template>
<view> <view class="ctr">
<view class="fixed-top">
<me-top title="工作台"></me-top>
<view class="filter flex-sb line-after">
<view v-for="(item, index) in filterType" :key="index" class="filter-item flex-c" @click="filter(item.id)">
<view :class="['title', 'flex-c', data.filterIndex == item.id ? 'title-active' : '']">{{item.name}}({{item.num}})</view>
<view class="select-style" v-if="data.filterIndex == item.id"></view>
</view>
</view>
</view>
</view> <me-empty-space :height="listMarginTop"></me-empty-space>
<me-empty-space height="100"></me-empty-space>
</view>
</template> </template>
<script> <script setup>
export default { import {onLoad, onShow} from '@dcloudio/uni-app'
data() { import {ref, reactive, computed, watch, inject} from 'vue'
return { import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeTop from "../../components/me-top/me-top.vue";
const data = reactive({
globalData: {},
filterIndex: 1
})
onLoad(() => {
data.globalData = inject('globalData')
})
} const listMarginTop = computed(() => {
}, return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH) + 50) * 2
methods: { })
} const filterType = reactive([
} {
id: 1,
name: '进行中',
num: 2,
}, {
id: 2,
name: '今日',
num: 2,
}, {
id: 3,
name: '明日',
num: 0,
}, {
id: 4,
name: '全部',
num: 724,
},
])
const filter = (index) => {
data.filterIndex = index
}
</script> </script>
<style> <style lang="scss" scoped>
.ctr {
padding: 0 32rpx;
box-sizing: border-box;
.fixed-top {
position: fixed;
top: 0;
background-color: var(--pageBgColor);
width: 100%;
.filter {
width: 686rpx;
height: 100rpx;
.filter-item {
width: 170rpx;
height: 100%;
position: relative;
.title {
width: 100%;
font-size: 28rpx;
color: var(--summaryColor);
line-height: 28rpx;
}
.title-active {
color: var(--themeColor) !important;
}
.select-style {
position: absolute;
bottom: 0;
width: 122rpx;
height: 4rpx;
background: var(--themeColor);
border-radius: 2rpx;
}
}
}
}
}
</style> </style>

21
static/css/common.scss
View File

@ -56,7 +56,7 @@
position: absolute; position: absolute;
width: 200%; width: 200%;
height: 1px; height: 1px;
background: var(--dividingLineColor); background: var(--dividerColor);
transform: scale(0.5); transform: scale(0.5);
transform-origin: 0 0; transform-origin: 0 0;
} }
@ -78,7 +78,7 @@
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 200%; height: 200%;
background: var(--dividingLineColor); background: var(--dividerColor);
transform: scale(0.5); transform: scale(0.5);
transform-origin: 0 0; transform-origin: 0 0;
} }
@ -152,7 +152,7 @@
} }
.auto-mask-layer-radius0::after { .auto-mask-layer-radius0::after {
@include auto-mask-layer(); @include auto-mask-layer();
background-color: var(--hotZoneBgColor); background-color: var(--contentBgColor);
border-radius: 0; border-radius: 0;
} }
.auto-mask-layer-radius4{ .auto-mask-layer-radius4{
@ -160,7 +160,7 @@
} }
.auto-mask-layer-radius4::after { .auto-mask-layer-radius4::after {
@include auto-mask-layer(); @include auto-mask-layer();
background-color: var(--hotZoneBgColor); background-color: var(--contentBgColor);
border-radius: 8rpx; border-radius: 8rpx;
} }
@ -169,7 +169,7 @@
} }
.auto-mask-layer-radius8::after { .auto-mask-layer-radius8::after {
@include auto-mask-layer(); @include auto-mask-layer();
background-color: var(--hotZoneBgColor); background-color: var(--contentBgColor);
border-radius: 16rpx; border-radius: 16rpx;
} }
@ -178,7 +178,7 @@
} }
.auto-mask-layer-radius-b8::after { .auto-mask-layer-radius-b8::after {
@include auto-mask-layer(); @include auto-mask-layer();
background-color: var(--hotZoneBgColor); background-color: var(--contentBgColor);
border-radius: 0rpx 0rpx 16rpx 16rpx; border-radius: 0rpx 0rpx 16rpx 16rpx;
} }
@ -187,7 +187,7 @@
} }
.auto-mask-layer-radius-lb8::after { .auto-mask-layer-radius-lb8::after {
@include auto-mask-layer(); @include auto-mask-layer();
background-color: var(--hotZoneBgColor); background-color: var(--contentBgColor);
border-radius: 0rpx 0rpx 0rpx 16rpx; border-radius: 0rpx 0rpx 0rpx 16rpx;
} }
@ -196,7 +196,7 @@
} }
.auto-mask-layer-radius-rb8::after { .auto-mask-layer-radius-rb8::after {
@include auto-mask-layer(); @include auto-mask-layer();
background-color: var(--hotZoneBgColor); background-color: var(--contentBgColor);
border-radius: 0rpx 0rpx 16rpx 0rpx; border-radius: 0rpx 0rpx 16rpx 0rpx;
} }
@ -234,12 +234,9 @@
.clickable-text { .clickable-text {
color: var(--themeColor); color: var(--themeColor);
} }
.clickable-text:active {
color: var(--themeColorClick);
}
.placeholder-class { .placeholder-class {
color: var(--contentColor30); color: var(--descriptionColor);
} }
swiper .wx-swiper-dots .wx-swiper-dot{ swiper .wx-swiper-dots .wx-swiper-dot{