feat: 计划列表
This commit is contained in:
parent
70ac9afc9b
commit
d23217a6b8
|
|
@ -40,6 +40,13 @@
|
|||
"navigationBarTitleText": "计划列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/uploadPhoto",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "上传图片"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/index",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -3,39 +3,76 @@
|
|||
<u-navbar
|
||||
:is-back="false"
|
||||
title="计划列表"
|
||||
title-color="black"
|
||||
:background="{ backgroundColor: '#F7F8FC' }"
|
||||
:border-bottom="false"
|
||||
>
|
||||
<view slot="right"> 424242 </view>
|
||||
<view slot="right">
|
||||
<!-- <u-icon
|
||||
name="calendar"
|
||||
color="#333"
|
||||
size="40"
|
||||
style="margin-right: 32rpx"
|
||||
></u-icon> -->
|
||||
<image
|
||||
src="/static/images/icon-date.png"
|
||||
mode="scaleToFill"
|
||||
style="width: 40rpx; height: 40rpx; margin-right: 32rpx"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<view class="selectTab">
|
||||
<view class="tab-item">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'completed' }"
|
||||
@click="switchTab('completed')"
|
||||
>
|
||||
<view class="label">已完成计划</view>
|
||||
<view class="count">12</view>
|
||||
</view>
|
||||
<view class="tab-item">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'incomplete' }"
|
||||
@click="switchTab('incomplete')"
|
||||
>
|
||||
<view class="label">未完成计划</view>
|
||||
<view class="count">5</view>
|
||||
<view class="count">12</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="planList">
|
||||
<view class="planList" :class="{ activeList: activeTab === 'incomplete' }">
|
||||
<view class="plan-item">
|
||||
<view class="time">
|
||||
<u-icon
|
||||
label="uView"
|
||||
size="40"
|
||||
name="https://cdn.uviewui.com/uview/example/button.png"
|
||||
></u-icon>
|
||||
<view class="plan-header">
|
||||
<u-icon name="calendar" color="black" size="40"></u-icon>
|
||||
<view class="date">05-21</view>
|
||||
<view>1天前</view>
|
||||
</view>
|
||||
<view class="place-time">
|
||||
<view class="place">校门A区教学楼</view>
|
||||
<u-tag text="9:00~12:00" type="info" border-color="transparent" />
|
||||
<view class="plan-content">
|
||||
<view class="plan-content-top">
|
||||
<view class="place">校门A区教学楼</view>
|
||||
<u-tag text="9:00~12:00" type="info" border-color="transparent" />
|
||||
</view>
|
||||
<view class="plan-content-main">
|
||||
北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
|
||||
</view>
|
||||
</view>
|
||||
<view class="illustrate">
|
||||
北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
|
||||
</view>
|
||||
<view class="plan-item">
|
||||
<view class="plan-header">
|
||||
<u-icon name="calendar" color="black" size="40"></u-icon>
|
||||
<view class="date">05-21</view>
|
||||
<view>1天前</view>
|
||||
</view>
|
||||
<view class="plan-content">
|
||||
<view class="plan-content-top">
|
||||
<view class="place">校门A区教学楼</view>
|
||||
<u-tag text="9:00~12:00" type="info" border-color="transparent" />
|
||||
</view>
|
||||
<view class="plan-content-main">
|
||||
北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -45,10 +82,16 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
activeTab: "completed",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
methods: {
|
||||
switchTab(tab) {
|
||||
this.activeTab = tab;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -56,34 +99,115 @@ export default {
|
|||
.content {
|
||||
height: 100vh;
|
||||
background: #f7f8fc;
|
||||
.selectTab{
|
||||
padding: 42rpx 90rpx;
|
||||
.selectTab {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// background: ;
|
||||
.tab-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
background: #fff;
|
||||
.label{
|
||||
background: linear-gradient(to right, #383edd, #4874f6);
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin: 0 32rpx 32rpx;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.count{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
.count {
|
||||
font-size: 36rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.label {
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -46rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #383edd;
|
||||
border-radius: 10rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -34rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 4rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.planList {
|
||||
padding: 0 32rpx;
|
||||
.plan-item {
|
||||
border-radius: 16rpx;
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
background: #fff;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#edf2ff 0%,
|
||||
#fafcff 30%,
|
||||
#ffffff 100%
|
||||
);
|
||||
.plan-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
.plan-content {
|
||||
padding: 20rpx;
|
||||
padding-bottom: 32rpx;
|
||||
&-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.place {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
&-main {
|
||||
margin-top: 32rpx;
|
||||
background-color: #f3f3f3;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.activeList {
|
||||
.plan-item {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#fef7ec 0%,
|
||||
#fffdfa 30%,
|
||||
#ffffff 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,238 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 遮罩层 -->
|
||||
<view class="mask" v-if="showMenu" @click="toggleMenu"></view>
|
||||
|
||||
<!-- 下拉菜单 -->
|
||||
<view class="dropdown-menu" v-if="showMenu">
|
||||
<view
|
||||
class="menu-item"
|
||||
v-for="(item, index) in menuItems"
|
||||
:key="index"
|
||||
@click="selectMenuItem(item)"
|
||||
>
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-navbar
|
||||
:is-back="true"
|
||||
title="上传图片"
|
||||
title-color="black"
|
||||
:background="{ backgroundColor: '#F7F8FC' }"
|
||||
:border-bottom="false"
|
||||
>
|
||||
<view slot="right">
|
||||
<view class="menu-wrapper">
|
||||
<image
|
||||
src="/static/iconfont/more.svg"
|
||||
mode="scaleToFill"
|
||||
style="width: 40rpx; height: 40rpx; margin-right: 32rpx"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<view class="content-header">
|
||||
<view class="content-header-title"> 区域名称——所属计划 </view>
|
||||
</view>
|
||||
|
||||
<view class="planList">
|
||||
<view class="plan-header">
|
||||
<text>请上传区域图片</text>
|
||||
</view>
|
||||
<view class="plan-content">
|
||||
<view class="plan-content-top">
|
||||
<image
|
||||
src="/static/images/logo.png"
|
||||
mode="scaleToFill"
|
||||
style="width: 160rpx; height: 160rpx"
|
||||
/>
|
||||
</view>
|
||||
<view class="plan-content-remark">
|
||||
<view class="plan-content-remark-title">备注</view>
|
||||
<view class="plan-content-remark-text">
|
||||
备注备注备注备注备注备注备注备注备注备注备注备注备注
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-button
|
||||
class="bottom-btn"
|
||||
shape="circle"
|
||||
type="primary"
|
||||
style="margin: 0 32rpx"
|
||||
@click="submitForm"
|
||||
>上传</u-button
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab: "completed",
|
||||
showMenu: false,
|
||||
menuItems: ["教学楼楼道", "南广场跑道", "食堂大厅", "食堂大厅"],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
switchTab(tab) {
|
||||
this.activeTab = tab;
|
||||
},
|
||||
toggleMenu() {
|
||||
this.showMenu = !this.showMenu;
|
||||
},
|
||||
selectMenuItem(item) {
|
||||
// 处理菜单项选择
|
||||
console.log("选择了:", item);
|
||||
// 这里可以添加选择后的逻辑
|
||||
this.showMenu = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background: #f7f8fc;
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
height: 160rpx;
|
||||
background: #ddd;
|
||||
border-radius: 16rpx;
|
||||
margin: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
&-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border-radius: 32rpx;
|
||||
width: 70%;
|
||||
margin: 0 auto 32rpx;
|
||||
}
|
||||
}
|
||||
.planList {
|
||||
margin: 0 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.plan-header {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
.plan-content {
|
||||
padding: 32rpx;
|
||||
&-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.place {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
&-remark {
|
||||
margin-top: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
&-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
&-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.activeList {
|
||||
.plan-item {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#fef7ec 0%,
|
||||
#fffdfa 30%,
|
||||
#ffffff 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 32rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 32rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 80rpx;
|
||||
right: 32rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
width: 280rpx;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
|
||||
.menu-item {
|
||||
padding: 24rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -68,17 +68,17 @@ export default {
|
|||
cellList: [
|
||||
{
|
||||
title: "单位信息",
|
||||
icon: "/static/images/pos-icon.png",
|
||||
icon: "/static/images/icon-unit.png",
|
||||
path: "/pages/user/unitInfo/index",
|
||||
},
|
||||
{
|
||||
title: "版本信息",
|
||||
icon: "/static/images/pos-icon.png",
|
||||
icon: "/static/images/icon-info.png",
|
||||
path: "/pages/user/versionInfo/index",
|
||||
},
|
||||
{
|
||||
title: "注销",
|
||||
icon: "/static/images/pos-icon.png",
|
||||
icon: "/static/images/icon-logout.png",
|
||||
path: "",
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744080752409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1190" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M576 832a64 64 0 1 1-128 0 64 64 0 0 1 128 0zM512 256a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 320a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" fill="#000000" fill-opacity=".9" p-id="1191"></path></svg>
|
||||
|
After Width: | Height: | Size: 527 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Loading…
Reference in New Issue