【私域操盘手】 操盘手端UI - 设备管理
This commit is contained in:
柳清爽
@@ -21,6 +21,13 @@
|
|||||||
"navigationBarTitleText": "我的"
|
"navigationBarTitleText": "我的"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/device/index",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "设备管理"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/scenarios/index",
|
"path": "pages/scenarios/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
558
Cunkebao/pages/device/index.vue
Normal file
558
Cunkebao/pages/device/index.vue
Normal file
@@ -0,0 +1,558 @@
|
|||||||
|
<!-- 设备管理页面 -->
|
||||||
|
<template>
|
||||||
|
<view class="device-container">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<view class="header">
|
||||||
|
<view class="back-icon" @click="goBack">
|
||||||
|
<u-icon name="arrow-left" size="44" color="#000000"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view class="title">设备管理</view>
|
||||||
|
<view class="header-right">
|
||||||
|
<view class="add-btn" @click="addDevice">
|
||||||
|
<u-icon name="plus" size="30" color="#ffffff"></u-icon>
|
||||||
|
<text class="add-text">添加设备</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 统计卡片 -->
|
||||||
|
<view class="stats-cards">
|
||||||
|
<view class="stat-card">
|
||||||
|
<view class="stat-label">总设备数</view>
|
||||||
|
<view class="stat-value blue">42</view>
|
||||||
|
</view>
|
||||||
|
<view class="stat-card">
|
||||||
|
<view class="stat-label">在线设备</view>
|
||||||
|
<view class="stat-value green">35</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 内容区域 -->
|
||||||
|
<view class="content-container">
|
||||||
|
<!-- 搜索和筛选区域 -->
|
||||||
|
<view class="search-bar">
|
||||||
|
<view class="search-input">
|
||||||
|
<u-search
|
||||||
|
placeholder="搜索设备IMEI/备注"
|
||||||
|
v-model="searchKeyword"
|
||||||
|
:show-action="false"
|
||||||
|
:clearabled="true"
|
||||||
|
bgColor="#fff"
|
||||||
|
searchIconSize="50"
|
||||||
|
shape="round"
|
||||||
|
></u-search>
|
||||||
|
</view>
|
||||||
|
<view class="filter-btn" @click="showFilter">
|
||||||
|
<image src="/static/images/icons/filter.svg" class="filter-icon"></image>
|
||||||
|
</view>
|
||||||
|
<view class="refresh-btn" @click="refreshList">
|
||||||
|
<u-icon name="reload" size="48" color="#333"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态筛选 -->
|
||||||
|
<view class="filter-bar">
|
||||||
|
<view class="status-filter" @click="showStatusPopup">
|
||||||
|
<text>{{ statusText }}</text>
|
||||||
|
<u-icon name="arrow-down" size="28" color="#333"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view class="select-all">
|
||||||
|
<u-checkbox v-model="selectAll" size="40" iconSize="35" shape="circle" activeColor="#4080ff"></u-checkbox>
|
||||||
|
<text class="select-text">全选</text>
|
||||||
|
</view>
|
||||||
|
<view class="delete-btn" @click="deleteDevices" :class="{disabled: !hasSelected}">
|
||||||
|
删除
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 设备列表 -->
|
||||||
|
<view class="device-list">
|
||||||
|
<!-- 设备项 1 -->
|
||||||
|
<view class="device-item">
|
||||||
|
<view class="device-checkbox">
|
||||||
|
<u-checkbox size="40" iconSize="35" v-model="device1Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
|
||||||
|
</view>
|
||||||
|
<view class="device-info">
|
||||||
|
<view class="device-header">
|
||||||
|
<view class="device-name">设备 1</view>
|
||||||
|
<view class="device-status online">在线</view>
|
||||||
|
</view>
|
||||||
|
<view class="device-imei">IMEI: sd123123</view>
|
||||||
|
<view class="device-wx">微信号: wxid_hxdxdoal</view>
|
||||||
|
<view class="device-likes">
|
||||||
|
<text>好友数: 435</text>
|
||||||
|
<text class="today-stats">今日新增: +20</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 设备项 2 -->
|
||||||
|
<view class="device-item">
|
||||||
|
<view class="device-checkbox">
|
||||||
|
<u-checkbox v-model="device2Selected" shape="circle" activeColor="#4080ff"
|
||||||
|
size="40" iconSize="35"
|
||||||
|
></u-checkbox>
|
||||||
|
</view>
|
||||||
|
<view class="device-info">
|
||||||
|
<view class="device-header">
|
||||||
|
<view class="device-name">设备 2</view>
|
||||||
|
<view class="device-status online">在线</view>
|
||||||
|
</view>
|
||||||
|
<view class="device-imei">IMEI: sd123124</view>
|
||||||
|
<view class="device-wx">微信号: wxid_2i7sncgq</view>
|
||||||
|
<view class="device-likes">
|
||||||
|
<text>好友数: 143</text>
|
||||||
|
<text class="today-stats">今日新增: +26</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 设备项 3 -->
|
||||||
|
<view class="device-item">
|
||||||
|
<view class="device-checkbox">
|
||||||
|
<u-checkbox size="40" iconSize="35" v-model="device3Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
|
||||||
|
</view>
|
||||||
|
<view class="device-info">
|
||||||
|
<view class="device-header">
|
||||||
|
<view class="device-name">设备 3</view>
|
||||||
|
<view class="device-status online">在线</view>
|
||||||
|
</view>
|
||||||
|
<view class="device-imei">IMEI: sd123125</view>
|
||||||
|
<view class="device-wx">微信号: wxid_yunzn4lp</view>
|
||||||
|
<view class="device-likes">
|
||||||
|
<text>好友数: 707</text>
|
||||||
|
<text class="today-stats">今日新增: +48</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 设备项 4 -->
|
||||||
|
<view class="device-item">
|
||||||
|
<view class="device-checkbox">
|
||||||
|
<u-checkbox size="40" iconSize="35" v-model="device4Selected" shape="circle" activeColor="#4080ff"></u-checkbox>
|
||||||
|
</view>
|
||||||
|
<view class="device-info">
|
||||||
|
<view class="device-header">
|
||||||
|
<view class="device-name">设备 4</view>
|
||||||
|
<view class="device-status offline">离线</view>
|
||||||
|
</view>
|
||||||
|
<view class="device-imei">IMEI: sd123126</view>
|
||||||
|
<view class="device-wx">微信号: wxid_4k39dnsc</view>
|
||||||
|
<view class="device-likes">
|
||||||
|
<text>好友数: 529</text>
|
||||||
|
<text class="today-stats">今日新增: +0</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态选择弹窗 -->
|
||||||
|
<u-picker
|
||||||
|
:show="statusPickerShow"
|
||||||
|
:columns="[statusOptions]"
|
||||||
|
@confirm="confirmStatus"
|
||||||
|
@cancel="cancelStatus"
|
||||||
|
confirmColor="#4080ff"
|
||||||
|
title="选择状态"
|
||||||
|
></u-picker>
|
||||||
|
|
||||||
|
<!-- 底部导航栏 -->
|
||||||
|
<CustomTabBar active="profile"></CustomTabBar>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CustomTabBar from '@/components/CustomTabBar.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CustomTabBar
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchKeyword: '',
|
||||||
|
selectAll: false,
|
||||||
|
device1Selected: false,
|
||||||
|
device2Selected: false,
|
||||||
|
device3Selected: false,
|
||||||
|
device4Selected: false,
|
||||||
|
statusPickerShow: false,
|
||||||
|
statusOptions: [
|
||||||
|
{ text: '全部状态', value: 'all' },
|
||||||
|
{ text: '在线', value: 'online' },
|
||||||
|
{ text: '离线', value: 'offline' }
|
||||||
|
],
|
||||||
|
currentStatus: 'all'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasSelected() {
|
||||||
|
return this.device1Selected || this.device2Selected || this.device3Selected || this.device4Selected;
|
||||||
|
},
|
||||||
|
statusText() {
|
||||||
|
const selected = this.statusOptions.find(option => option.value === this.currentStatus);
|
||||||
|
return selected ? selected.text : '全部状态';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 返回上一页
|
||||||
|
goBack() {
|
||||||
|
uni.navigateBack();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加设备
|
||||||
|
addDevice() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '添加设备功能待实现',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 刷新列表
|
||||||
|
refreshList() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '刷新中'
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '刷新成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 显示筛选
|
||||||
|
showFilter() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '筛选功能待实现',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 显示状态选择
|
||||||
|
showStatusPopup() {
|
||||||
|
this.statusPickerShow = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认状态选择
|
||||||
|
confirmStatus(e) {
|
||||||
|
this.currentStatus = e.value[0];
|
||||||
|
this.statusPickerShow = false;
|
||||||
|
|
||||||
|
// 应用筛选逻辑
|
||||||
|
this.applyStatusFilter();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 应用状态筛选
|
||||||
|
applyStatusFilter() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '筛选中'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 模拟筛选过程
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.hideLoading();
|
||||||
|
|
||||||
|
// 提示用户
|
||||||
|
uni.showToast({
|
||||||
|
title: `已筛选: ${this.statusText}`,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 这里可以添加实际的设备筛选逻辑
|
||||||
|
// 根据 this.currentStatus 对设备列表进行筛选
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 取消状态选择
|
||||||
|
cancelStatus() {
|
||||||
|
this.statusPickerShow = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除设备
|
||||||
|
deleteDevices() {
|
||||||
|
if (!this.hasSelected) return;
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除',
|
||||||
|
content: '确定要删除选中的设备吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '删除成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
this.device1Selected = false;
|
||||||
|
this.device2Selected = false;
|
||||||
|
this.device3Selected = false;
|
||||||
|
this.device4Selected = false;
|
||||||
|
this.selectAll = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
selectAll(newVal) {
|
||||||
|
this.device1Selected = newVal;
|
||||||
|
this.device2Selected = newVal;
|
||||||
|
this.device3Selected = newVal;
|
||||||
|
this.device4Selected = newVal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.device-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
padding-bottom: 180rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1px solid #e9e9e9;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
.back-icon {
|
||||||
|
width: 60rpx;
|
||||||
|
color: #000;
|
||||||
|
padding: 10rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 40rpx;
|
||||||
|
float: left;
|
||||||
|
margin-left: 70rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
.add-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #2563EB;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 15rpx 30rpx;
|
||||||
|
color: #fff;
|
||||||
|
text-indent: 15rpx;
|
||||||
|
|
||||||
|
.add-text {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-cards {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-top: 130rpx; // 添加顶部边距，为固定header留出空间
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 35rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin: 15rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 55rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: 'Digital-Bold', sans-serif;
|
||||||
|
|
||||||
|
&.blue {
|
||||||
|
color: #4080ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.green {
|
||||||
|
color: #2fc25b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
margin: 0 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 35rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2rpx solid #e9e9e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
flex: 1;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn, .refresh-btn {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
border: 2rpx solid #e9e9e9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-icon {
|
||||||
|
width: 43rpx;
|
||||||
|
height: 43rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10rpx 25rpx;
|
||||||
|
|
||||||
|
.status-filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1rpx solid #e5e5e5;
|
||||||
|
min-width: 180rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
text {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-all {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
|
||||||
|
.select-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn {
|
||||||
|
margin-left: 30rpx;
|
||||||
|
background-color: #ee6666;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10rpx 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
background-color: #cccccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-list {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.device-item {
|
||||||
|
display: flex;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin: 25rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
border: 2rpx solid #e9e9e9;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-checkbox {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.device-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
|
||||||
|
.device-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 6rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
&.online {
|
||||||
|
background-color: #e6f7f0;
|
||||||
|
color: #2fc25b;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.offline {
|
||||||
|
background-color: #f7eae9;
|
||||||
|
color: #ee6666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-imei, .device-wx {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-likes {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="title">我的</view>
|
<view class="title">我的</view>
|
||||||
<view class="header-icons">
|
<view class="header-icons">
|
||||||
<u-icon name="setting" size="50" color="#000000" class="icon-setting" @click="goToSetting"></u-icon>
|
<u-icon name="setting" size="45" color="#000000" class="icon-setting" @click="goToSetting"></u-icon>
|
||||||
<u-icon name="bell" size="50" color="#000000" class="icon-bell" @click="goToNotification"></u-icon>
|
<u-icon name="bell" size="50" color="#000000" class="icon-bell" @click="goToNotification"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -161,14 +161,14 @@ export default {
|
|||||||
min-height: 90vh;
|
min-height: 90vh;
|
||||||
background-color: #f9fafb;
|
background-color: #f9fafb;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 50rpx;
|
padding-top: 46rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 25rpx 30rpx;
|
padding: 30rpx 30rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-bottom: 1px solid #e9e9e9;
|
border-bottom: 1px solid #e9e9e9;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -178,9 +178,7 @@ export default {
|
|||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 45rpx;
|
font-size: 40rpx;
|
||||||
font-weight: bold;
|
|
||||||
color: #2664ec;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-icons {
|
.header-icons {
|
||||||
@@ -197,7 +195,7 @@ export default {
|
|||||||
margin: 35rpx;
|
margin: 35rpx;
|
||||||
margin-top: 120rpx;
|
margin-top: 120rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 16rpx;
|
border-radius: 35rpx;
|
||||||
padding: 50rpx;
|
padding: 50rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -255,7 +253,7 @@ export default {
|
|||||||
.menu-list {
|
.menu-list {
|
||||||
margin: 35rpx;
|
margin: 35rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 16rpx;
|
border-radius: 35rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
|||||||
@@ -310,8 +310,6 @@ export default {
|
|||||||
.title {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
font-weight: bold;
|
|
||||||
color: #2563EB;
|
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 70rpx;
|
margin-left: 70rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
9
Cunkebao/static/images/icons/filter.svg
Normal file
9
Cunkebao/static/images/icons/filter.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 5L9 12V19L15 21V12L21 5H3Z"
|
||||||
|
stroke="#333333"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
fill="none" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 324 B |
Reference in New Issue
Block a user