Skip to content

C
computedRoomPad
提交 ce8587c0 authored 作者: caodi\cd's avatar caodi\cd
浏览文件
操作

fix:页面优化存档

上级 00b6fab7
隐藏空白字符变更
内嵌 并排
正在显示 包含 715 行增加 和 158 行删除
pages.json
浏览文件 @ ce8587c0
...@@ -58,6 +58,13 @@ ...@@ -58,6 +58,13 @@
{ {
"path": "pages/listingManagement/index" "path": "pages/listingManagement/index"
}, },
// 井道巡检列表
{
"path": "pages/shaftInspection/shaftInspectionList",
"style": {
"navigationBarTitleText": ""
}
},
// 井道巡检新页面 // 井道巡检新页面
{ {
"path": "pages/shaftInspection/shaftInspectionNew", "path": "pages/shaftInspection/shaftInspectionNew",
......
pages/home/home.vue
浏览文件 @ ce8587c0
...@@ -57,7 +57,8 @@ ...@@ -57,7 +57,8 @@
}, },
{ {
image: '../../static/img/jd.png', image: '../../static/img/jd.png',
text: '井道巡检' text: '井道巡检',
url:"/pages/shaftInspection/shaftInspectionList"
}, },
{ {
image: '../../static/img/sj.png', image: '../../static/img/sj.png',
......
pages/inspectionManagement/index.vue
浏览文件 @ ce8587c0
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
</block> </block>
<block slot="right" class="nav-right"> <block slot="right" class="nav-right">
<view class="header-buttons"> <view class="header-buttons">
<button class="button" @click="lookLog">机房巡检</button> <button class="button" @click="clickInspection(1)">机房巡检</button>
<button class="button" @click="lookLog">井道巡检</button> <button class="button" @click="clickInspection(2)">井道巡检</button>
</view> </view>
</block> </block>
</uni-nav-bar> </uni-nav-bar>
...@@ -105,6 +105,18 @@ ...@@ -105,6 +105,18 @@
back() { back() {
uni.navigateBack(); uni.navigateBack();
}, },
clickInspection(type) {
if (type == 1) {
uni.navigateTo({
url: "/pages/shaftInspection/shaftInspectionNew",
});
} else {
uni.navigateTo({
url: "/pages/shaftInspection/shaftInspectionNew",
});
}
},
init() { init() {
const all_data = this.all_data || []; const all_data = this.all_data || [];
...@@ -307,7 +319,7 @@ ...@@ -307,7 +319,7 @@
.inspect-list { .inspect-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
} }
} }
......
pages/shaftInspection/shaftInspectionList.vue 0 → 100644
浏览文件 @ ce8587c0
<template>
<!-- 井道巡检列表 -->
<view class="container">
<uni-nav-bar :fixed="true" background-color="rgba(214, 240, 255, 0.0)" status-bar rightWidth="300">
<block slot="left">
<view class="uni-nav-bar-text" @click="back">
<text class="iconfont icon-Arrow-Left"></text>
</view>
</block>
<block slot="right" class="nav-right">
<view class="header-buttons">
<button class="button" @click="lookLog">查看样表</button>
</view>
</block>
</uni-nav-bar>
<!-- 第二个模块 -->
<view class="profile-section">
<view class="profile-box">
<view class="profile-left">
<view class="avatar">
<image src="@/static/img/add-img/home1.png" mode="aspectFit"></image>
</view>
<view class="info">
<view class="username">{{ userInfo.user }}啊啊啊</view>
<view class="number">巡检编号：<text class="value">111111</text></view>
</view>
</view>
<view class="profile-right">
<button class="record-button" @click="toListingManagement">
巡检人签字
</button>
</view>
</view>
</view>
<view class="content-box">
<!-- 左侧模块 -->
<view class="left-side">
<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: activeTab === index }]"
@click="activeTab = index">
{{ tab }}
</view>
</view>
<!-- 右侧模块 -->
<view class="right-side">
<!-- 第一部分：按钮 -->
<view class="button-group">
<view class="button">已巡检{{ inspectedCount }}个井道</view>
<view class="button">请点击“需巡检井道”执行巡检</view>
</view>
<!-- 第二部分：卡片组 -->
<view class="card-group">
<view class="card-title">{{ tabs[activeTab] }}</view>
<view class="card-list">
<view v-for="(card, index) in cards" :key="index" class="card">
<view class="card-content">
<view class="status-line">
<image src="/static/status-icon.png" class="status-icon" />
<text class="status-text">巡检中</text>
</view>
<view class="info-line">
<text class="info-text">{{ card }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
tabs: ["所有井道", "A座", "B座", "C座", "D座", "E座", "F座"], // 选项卡内容
activeTab: 0, // 默认选中的选项卡
inspectedCount: 5, // 已巡检的井道数量
cards: ["A座-1楼", "A座-2楼", "A座-3楼", "A座-4楼", "A座-5楼", "A座-6楼", "A座-7楼", "A座-8楼"], // 卡片内容
inspectionCode: `JFXJ${moment().format("yyyyMMDDHHmmss")}${(Math.floor(Math.random() * 900) + 100)}`,
};
},
computed: {
userInfo() {
return this.$store.state.now_user || {};
},
},
methods: {
// 返回
back() {
uni.navigateBack();
},
},
};
</script>
<style lang="less" scoped>
/* 导航栏样式 */
.uni-nav-bar-text {
height: 28.8px;
width: 28.8px;
background: #ffffff;
border: 0.32px solid rgba(224, 224, 224, 1);
border-radius: 14.4px;
border-radius: 50%;
color: #333;
text-align: center;
.iconfont {
font-size: 16px;
line-height: 28.8px;
}
}
.nav-right {
width: 192px;
}
.header-buttons {
display: flex;
align-items: center;
margin-left: auto; // 将按钮组推到最右侧
.button {
width: 89.6px;
height: 28.8px;
background: #ffffff;
border-radius: 14.4px;
margin-left: 12.8px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #000000;
line-height: 28.8px;
font-weight: 400;
}
}
.container {
background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
padding: 0 25.6px;
height: 100vh;
overflow: hidden;
.profile-section {
width: 100%;
margin-bottom: 12.8px;
.profile-box {
background-color: #fff;
border-radius: 9.6px;
padding: 12.8px 25.6px;
display: flex;
justify-content: space-between;
align-items: center;
.profile-left {
display: flex;
align-items: center;
.avatar {
position: relative;
width: 51.2px;
height: 51.2px;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.change-password {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
height: 17.6px;
font-family: PingFangSC-Regular;
font-size: 9.6px;
color: #ffffff;
line-height: 16px;
font-weight: 400;
}
}
.info {
.username {
font-size: 16px;
color: #000000;
line-height: 22.4px;
font-weight: 500;
margin-bottom: 7.2px;
}
.number {
font-size: 12.8px;
color: #4A4A4A;
line-height: 22.4px;
font-weight: 400;
.value {
color: #000000;
}
}
}
}
.profile-right {
display: flex;
.inspection-button {
width: 89.6px;
height: 28.8px;
background-image: linear-gradient(105deg, #68acfb 0%, #3774f6 100%);
border-radius: 14.4px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #ffffff;
line-height: 28.8px;
font-weight: 400;
margin-right: 12.8px;
}
.record-button {
width: 115.2px;
height: 28.8px;
background: #ffffff;
border: 0.8px solid rgba(55, 116, 246, 1);
border-radius: 14.4px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #3774f6;
line-height: 28.8px;
font-weight: 400;
}
}
}
}
/* 页面容器 */
.content-box {
width: 972.8px;
height: 478.4px;
border-radius: 9.6px;
background-color: #ffffff;
display: flex;
/* 左侧模块 */
.left-side {
width: 120px;
height: 100%;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 12.8px;
.tab-item {
width: 100%;
height: 38.4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11.2px;
color: #333333;
cursor: pointer;
&.active {
background-color: #ffffff;
}
}
}
/* 右侧模块 */
.right-side {
flex: 1;
padding: 12.8px 18.4px;
display: flex;
flex-direction: column;
.button-group {
display: flex;
margin-bottom: 12.8px;
.button {
height: 27.2px;
background-color: rgba(55, 116, 246, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 11.2px;
color: #3774f6;
border-radius: 3.2px;
&:first-child {
width: 97.6px;
}
&:last-child {
flex: 1;
margin-left: 9.6px;
}
}
}
.card-group {
flex: 1;
.card-title {
font-size: 12.8px;
font-weight: bold;
color: #333333;
margin-bottom: 12.8px;
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 12.8px;
.card {
width: 105.6px;
height: 51.2px;
background-color: #f9f9f9;
border-radius: 6.4px;
padding: 6.4px 10.312px;
box-sizing: border-box;
.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
.status-line {
display: flex;
align-items: center;
.status-icon {
width: 12.8px;
height: 12.8px;
margin-right: 7.112px;
}
.status-text {
font-size: 9.6px;
color: #666666;
}
}
.info-line {
font-size: 9.6px;
color: #333333;
.info-text{
margin-left: 18.4rpx;
}
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
pages/shaftInspection/shaftInspectionNew.vue
浏览文件 @ ce8587c0
...@@ -8,55 +8,79 @@ ...@@ -8,55 +8,79 @@
</view> </view>
</block> </block>
</uni-nav-bar> </uni-nav-bar>
<view class="profile-section">
<view class="profile-box">
<view class="profile-left">
<view class="avatar">
<image src="@/static/img/add-img/home1.png" mode="aspectFit"></image>
</view>
<view class="info">
<view class="username">井道巡检</view>
<view class="number">巡检编号：<text class="value">{{ location }}{{floor}}</text></view>
</view>
</view>
</view>
</view>
<!-- 模块1：巡检井道 --> <!-- 模块1：巡检井道 -->
<view class="module"> <!-- <view class="module">
<view class="title-bar"> <view class="title-bar">
<view class="blue-line"></view> <view class="blue-line"></view>
<text class="title">巡检井道:</text> <text class="title">巡检井道</text>
<text class="location">{{ location }}{{floor}}</text> <text class="location">{{ location }}{{floor}}</text>
<button class="submit-btn" :class="{ active: isSubmitEnabled }" :disabled="!isSubmitEnabled" @click="submit"> <button class="submit-btn" :class="{ active: isSubmitEnabled }" :disabled="!isSubmitEnabled" @click="submit">
完成当前机房全部巡检 完成当前机房全部巡检
</button> </button>
</view> </view>
</view> </view> -->
<!-- 模块2：巡检说明 --> <!-- 模块2：巡检说明 -->
<view class="module"> <!-- <view class="module">
<view class="title-bar"> <view class="title-bar">
<view class="blue-line"></view> <view class="blue-line"></view>
<text class="title">巡检说明</text> <text class="title">巡检说明</text>
</view> </view>
<text class="description">{{ randomDescription }}</text> <text class="description">{{ randomDescription }}</text>
</view> </view> -->
<!-- 模块3：Tab 操作区域 --> <!-- 模块3：Tab 操作区域 -->
<view class="module"> <view class="module">
<view class="tab-buttons"> <view class="tab-buttons">
<view v-for="(tab, index) in tabs" :key="index" :class="['tab-button', { active: activeTab === index }]" <view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: activeTab === index }]"
@click="switchTab(index)"> @click="switchTab(index)">
<image :src="tab.icon" class="tab-icon"></image> <image :src="tab.icon" class="tab-icon"></image>
<text class="tab-text">{{ tab.label }}</text> <text class="tab-text">{{ tab.label }}</text>
<view v-if="activeTab === index" class="underline"></view>
</view> </view>
</view> </view>
<view class="tip">
<image class="tip-icon" src="@/static/img/add-img/home1.png" mode="aspectFit"></image>请点击“需巡检井道”执行巡检
</view>
<view class="tab-content"> <view class="tab-content">
<!-- 操作区域 --> <!-- 操作区域 -->
<view class="form-item"> <view class="form-item"><text class="form-label">巡检项</text>
<text class="form-label">{{ tabs[activeTab].label }}:</text> <view class="label">
<text>{{ tabs[activeTab].label }}</text>
</view>
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="form-label"><text class="required">*</text>巡检结论:</text> <text class="form-label"><text class="required">*</text>巡检结论</text>
<view class="switch-container"> <view class="switch-container">
<switch :checked="inspectionResult === 1" @change="onSwitchChange" class="switch" color="#007AFF" /> <view :class="['status-btn', { active: inspectionResult === 0 }]" @click="setInspectionResult(0)">
<text class="switch-text">{{ inspectionResult === 0 ? '正常' : '异常' }}</text> 正常
</view>
<view :class="['status-btn', { active: inspectionResult === 1 }]" @click="setInspectionResult(1)">
异常
</view>
</view> </view>
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="form-label"><text class="required">*</text>情况摘要:</text> <text class="form-label"><text class="required">*</text>情况摘要</text>
<input class="input-box" v-model="list[activeTab]&&list[activeTab].conclusion" placeholder="请输入情况摘要" /> <input class="input-box" v-model="list[activeTab]&&list[activeTab].conclusion" placeholder="请输入情况摘要" />
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="form-label">现场照片:</text> <text class="form-label">现场照片</text>
<text class="photo-limit">（最多5张）</text> <text class="photo-limit">（最多5张）</text>
<view class="photo-container"> <view class="photo-container">
<view v-for="(photo, index) in list[activeTab]&&list[activeTab].photos" :key="index" class="photo-item"> <view v-for="(photo, index) in list[activeTab]&&list[activeTab].photos" :key="index" class="photo-item">
...@@ -72,11 +96,19 @@ ...@@ -72,11 +96,19 @@
</view> </view>
<!-- 模块4：提交模块 --> <!-- 模块4：提交模块 -->
<view class="module submit-module"> <!-- <view class="module submit-module">
<button class="action-btn" @click="saveDraft">暂存</button> <button class="action-btn" @click="saveDraft">暂存</button>
<button class="action-btn complete-btn" @click="complete"> <button class="action-btn complete-btn" @click="complete">
完成 完成
</button> </button>
</view> -->
<view class="module submit-module">
<button class="action-btn" @click="saveDraft">暂存</button>
<button v-if="isSubmitEnabled" class="action-btn" :class="{ active: isSubmitEnabled }" @click="submit">
完成巡检
</button>
<button v-else class="action-btn complete-btn" @click="closePopup">下一项
</button>
</view> </view>
<!-- 使用 uni-popup 组件 完成弹窗 --> <!-- 使用 uni-popup 组件 完成弹窗 -->
<uni-popup ref="popup" type="center"> <uni-popup ref="popup" type="center">
...@@ -127,15 +159,15 @@ ...@@ -127,15 +159,15 @@
randomDescription: "这是一段随机说明文字。", // 随机说明文字 randomDescription: "这是一段随机说明文字。", // 随机说明文字
tabs: [{ tabs: [{
label: "门禁", label: "门禁",
icon: "/static/icons/door.png" icon: "../../static/img/add-img/home1.png"
}, },
{ {
label: "卫生", label: "卫生",
icon: "/static/icons/clean.png" icon: "../../static/img/add-img/home1.png"
}, },
{ {
label: "设备告警", label: "设备告警",
icon: "/static/icons/alert.png" icon: "../../static/img/add-img/home1.png"
}, },
], ],
activeTab: 0, // 当前选中的 Tab activeTab: 0, // 当前选中的 Tab
...@@ -426,9 +458,10 @@ ...@@ -426,9 +458,10 @@
if (this.isCurrentTabValid()) { if (this.isCurrentTabValid()) {
if (!this.firstSubmitTime) { if (!this.firstSubmitTime) {
this.firstSubmitTime = Date.now(); this.firstSubmitTime = Date.now();
this.$st
} }
const params = this.getParams(); //数据获取 const params = this.getParams(); //数据获取
const all_data = this.$store.state.all_data; //获取全部数据 const all_data = ore.state.all_data; //获取全部数据
params.isSubmit = 1; //修改提交状态 params.isSubmit = 1; //修改提交状态
let logContent = ""; let logContent = "";
if (this.uid) { if (this.uid) {
...@@ -502,6 +535,11 @@ ...@@ -502,6 +535,11 @@
switchTab(index) { switchTab(index) {
this.activeTab = index; this.activeTab = index;
this.updateCurrentTabData(); this.updateCurrentTabData();
}, // 设置巡检结论
setInspectionResult(value) {
this.inspectionResult = value;
this.list[this.activeTab].inspectionResult = value; // 更新当前 Tab 的数据
this.onSwitchChange(value); // 触发 Switch 值变化的逻辑
}, },
// Switch 值变化 // Switch 值变化
onSwitchChange(e) { onSwitchChange(e) {
...@@ -524,7 +562,6 @@ ...@@ -524,7 +562,6 @@
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
/* 导航栏样式 */ /* 导航栏样式 */
.uni-nav-bar-text { .uni-nav-bar-text {
...@@ -533,7 +570,6 @@ ...@@ -533,7 +570,6 @@
background: #ffffff; background: #ffffff;
border: 0.4px solid rgba(224, 224, 224, 1); border: 0.4px solid rgba(224, 224, 224, 1);
border-radius: 18px; border-radius: 18px;
border-radius: 50%;
color: #333; color: #333;
text-align: center; text-align: center;
...@@ -547,46 +583,117 @@ ...@@ -547,46 +583,117 @@
padding: 24px; padding: 24px;
} }
.profile-section {
width: 100%;
margin-bottom: 12.8px;
.profile-box {
background-color: #fff;
border-radius: 9.6px;
padding: 12.8px 25.6px;
display: flex;
justify-content: space-between;
align-items: center;
.profile-left {
display: flex;
align-items: center;
.avatar {
position: relative;
width: 40.5px;
height: 40.5px;
border-radius: 50%;
overflow: hidden;
margin-right: 9px;
image {
width: 100%;
height: 100%;
}
.change-password {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
height: 17.6px;
font-family: PingFangSC-Regular;
font-size: 9.6px;
color: #ffffff;
line-height: 16px;
font-weight: 400;
}
}
.info {
.username {
font-size: 16px;
color: #000000;
line-height: 22.4px;
font-weight: 500;
margin-bottom: 7.2px;
}
.number {
font-size: 12.8px;
color: #4A4A4A;
line-height: 22.4px;
font-weight: 400;
.value {
color: #000000;
}
}
}
}
}
}
.module { .module {
margin-bottom: 20px; background: #FFFFFF;
border-radius: 12px;
padding: 16px 25px;
} }
.title-bar { .title-bar {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
}
.blue-line {
width: 4px;
height: 16px;
background-color: #007AFF;
margin-right: 8px;
}
.title { .blue-line {
font-size: 16px; width: 4px;
font-weight: bold; height: 16px;
} background-color: #007AFF;
margin-right: 8px;
}
.location { .title {
margin-left: 8px; font-size: 16px;
color: #666; font-weight: bold;
} }
.submit-btn { .location {
position: absolute; margin-left: 8px;
right: 24px; color: #666;
width: 20%; }
background-color: #ccc;
color: #fff;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
}
.submit-btn.active { .submit-btn {
background-color: #007AFF; position: absolute;
right: 24px;
width: 20%;
background-color: #ccc;
color: #fff;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
&.active {
background-color: #007AFF;
}
}
} }
.description { .description {
...@@ -596,141 +703,199 @@ ...@@ -596,141 +703,199 @@
.tab-buttons { .tab-buttons {
display: flex; display: flex;
gap: 12px; justify-content: flex-start;
margin-bottom: 10px; /* 左对齐 */
}
.tab-button {
display: flex;
align-items: center; align-items: center;
justify-content: center; margin-bottom: 10px;
padding: 8px 12px; gap: 20px;
border: 1px solid #ddd; /* Tab 之间的间隔 */
border-radius: 20px; /* 容器内边距 */
}
.tab-button.active {
border-color: #007AFF;
background-color: #f0f8ff;
}
.tab-icon {
width: 16px;
height: 16px;
margin-right: 4px;
} }
.tab-text { .tip {
text-align: center; width: 100%;
height: 34px;
background: rgba(55, 116, 246, 0.05);
border: 1px solid rgba(55, 116, 246, 0.3);
border-radius: 10px;
font-size: 14px;
color: #4A4A4A;
letter-spacing: 0;
line-height: 34px;
font-weight: 400;
padding: 0 12px;
.tip-icon {
width: 14px;
height: 14px;
margin-right: 8px;
}
} }
.form-item { .tab-item {
display: flex; display: flex;
align-items: center; align-items: flex-start;
margin-bottom: 16px; position: relative;
} padding: 8px 0;
/* 上下内边距 */
cursor: pointer;
white-space: nowrap;
/* 防止文字换行 */
.tab-icon {
width: 10.5px;
height: 10.5px;
margin-bottom: 4px;
margin-right: 3px;
}
.form-label { .tab-text {
font-size: 14px; font-size: 14px;
font-weight: bold; color: #333;
margin-right: 8px; }
}
&.active {
.tab-text {
color: #3774F6;
/* 选中时的文字颜色 */
}
.required { .underline {
color: red; position: absolute;
margin-right: 4px; bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
/* 横线宽度与内容一致 */
height: 2px;
background-color: #3774F6;
/* 选中时的横线颜色 */
}
}
} }
.switch-container { .form-item {
display: flex; display: flex;
align-items: center; align-items: center;
} padding: 12px 0;
line-height: 36px;
.switch-text { border-bottom: 1px solid #F2F3F5;
font-size: 14px; ;
margin-left: 8px;
color: #007AFF; .form-label {
} font-size: 14px;
font-weight: bold;
margin-right: 32px;
width: 73px;
text-align: right;
.required {
color: red;
margin-right: 4px;
}
}
.switch { .switch-container {
transform: scale(0.8); display: flex;
} gap: 12px;
/* 按钮之间的间隔 */
.status-btn {
flex: 1;
/* 按钮宽度平分 */
padding: 7px 24px;
font-size: 16px;
color: #000000;
background: #F2F2F2;
text-align: center;
font-weight: 400;
line-height: 22px;
border-radius: 18px;
&.active {
color: #FFFFFF;
background: #3774F6;
border: 0.4px solid rgba(224, 224, 224, 1);
}
}
}
.input-box { .input-box {
flex: 1; flex: 1;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
padding: 6px; padding: 6px;
font-size: 14px; font-size: 14px;
} }
.photo-limit { .photo-limit {
font-size: 12px; font-size: 12px;
color: #666; color: #666;
} }
.photo-container { .photo-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 8px; margin-bottom: 8px;
}
.photo-item { .photo-item {
position: relative; position: relative;
margin-right: 8px; margin-right: 8px;
margin-bottom: 8px; margin-bottom: 8px;
}
.photo { .photo {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 4px; border-radius: 4px;
} }
.delete-photo { .delete-photo {
position: absolute; position: absolute;
top: -8px; top: -8px;
right: -8px; right: -8px;
background-color: #ff4d4f; background-color: #ff4d4f;
color: #fff; color: #fff;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
line-height: 16px; line-height: 16px;
font-size: 12px; font-size: 12px;
} }
}
}
.photo-btn { .photo-btn {
background-color: #007AFF; background-color: #007AFF;
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
padding: 4px 8px; padding: 4px 8px;
font-size: 12px; font-size: 12px;
width: 80px; width: 80px;
text-align: center; text-align: center;
}
} }
.submit-module { .submit-module {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
}
.action-btn { .action-btn {
background-color: #007AFF; background-color: #007AFF;
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
padding: 8px 16px; padding: 8px 16px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
}
.complete-btn { &.complete-btn {
background-color: #007AFF; background-color: #007AFF;
}
}
} }
// 弹窗内容样式 // 弹窗内容样式
.popup-content { .popup-content {
background-color: white; background-color: white;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论