Skip to content

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

fix:样式

上级 5ab24ae0
显示空白字符变更
内嵌 并排
正在显示 包含 89 行增加 和 84 行删除
pages/listingManagement/index.vue
浏览文件 @ 00b6fab7
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<view class="selected-count"> 已选择{{ selectedCount }}张图片</view> <view class="selected-count"> 已选择{{ selectedCount }}张图片</view>
<!-- 第三个模块：照片显示模块 --> <!-- 第三个模块：照片显示模块 -->
<view class="photo-box">
<view class="photo-list"> <view class="photo-list">
<view <view
v-for="(group, date) in photoGroups" v-for="(group, date) in photoGroups"
...@@ -52,7 +53,9 @@ ...@@ -52,7 +53,9 @@
<view class="check-icon" @click.stop="toggleSelect(photo)"> <view class="check-icon" @click.stop="toggleSelect(photo)">
<text v-if="photo.selected">√</text> <text v-if="photo.selected">√</text>
</view> </view>
<view class="delete-icon" @click.stop="deletePhoto(photo)">×</view> <view class="delete-icon" @click.stop="deletePhoto(photo)"
>×</view
>
<view class="type">{{ <view class="type">{{
photo.synchronization ? "已同步" : "待同步" photo.synchronization ? "已同步" : "待同步"
}}</view> }}</view>
...@@ -69,7 +72,8 @@ ...@@ -69,7 +72,8 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view></view
>
<view <view
v-if="selectedPhotos && selectedPhotos.length" v-if="selectedPhotos && selectedPhotos.length"
class="inspection-button" class="inspection-button"
...@@ -135,12 +139,7 @@ export default { ...@@ -135,12 +139,7 @@ export default {
onLoad(options) { onLoad(options) {
this.getDetails(); this.getDetails();
}, },
mounted() { mounted() {},
const systemInfo = uni.getSystemInfoSync();
console.log("设备逻辑宽度",systemInfo.windowWidth); // 设备逻辑宽度
console.log("设备像素比",systemInfo.pixelRatio); // 设备像素比
},
methods: { methods: {
back() { back() {
uni.navigateBack(); uni.navigateBack();
...@@ -324,71 +323,66 @@ export default { ...@@ -324,71 +323,66 @@ export default {
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/* 导航栏样式--- */
.uni-nav-bar-text { .uni-nav-bar-text {
height: 36px; height: 28.8px;
width: 36px; width: 28.8px;
background: #ffffff; background: #ffffff;
border: 0.4px solid rgba(224, 224, 224, 1); border: 0.32px solid rgba(224, 224, 224, 1);
border-radius: 18px; border-radius: 14.4px;
border-radius: 50%; border-radius: 50%;
color: #333; color: #333;
text-align: center; text-align: center;
.iconfont { .iconfont {
font-size: 20px; font-size: 16px;
line-height: 36px; line-height: 28.8px;
} }
} }
.nav-right { .nav-right {
width: 240px; width: 192px;
} }
.header-buttons { .header-buttons {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: auto; // 将按钮组推到最右侧 margin-left: auto;
.button { .button {
width: 112px; width: 89.6px;
height: 36px; height: 28.8px;
background: #ffffff; background: #ffffff;
border-radius: 18px; border-radius: 14.4px;
margin-left: 16px; margin-left: 12.8px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 16px; font-size: 12.8px;
color: #000000; color: #000000;
line-height: 36px; line-height: 28.8px;
font-weight: 400; font-weight: 400;
} }
} }
/* 导航栏样式--- */
.container { .container {
background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%); background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
// padding: 0 32px; height: 100%;
height: 100vh;
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 12.8px;
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
.blue-line { .blue-line {
width: 4px; width: 3.2px;
height: 20px; height: 16px;
background-color: blue; background-color: blue;
margin-right: 8px; margin-right: 6.4px;
} }
} }
...@@ -396,38 +390,46 @@ export default { ...@@ -396,38 +390,46 @@ export default {
display: flex; display: flex;
.btn { .btn {
width: 112px; width: 89.6px;
height: 36px; height: 28.8px;
border-radius: 18px; border-radius: 14.4px;
margin-left: 8px; margin-left: 6.4px;
} }
} }
} }
.selected-count { .selected-count {
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 8px; padding: 6.4px;
border-radius: 8px; border-radius: 6.4px;
margin-bottom: 16px; margin-bottom: 12.8px;
} }
.photo-list { .photo-box {
padding: 24px 0; width: 100%;
height: 100%;
overflow: hidden;
.photo-list {
padding: 19.2px 0;
overflow: auto;
.photo-group { .photo-group {
margin-bottom: 16px; margin-bottom: 12.8px;
.group-header { .group-header {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 6.4px;
padding: 0 32px; padding: 0 25.6px;
.date { .date {
font-size: 26px; font-size: 20.8px;
color: #000000; color: #000000;
line-height: 18px; line-height: 14.4px;
font-weight: 500; font-weight: 500;
margin-left: 8px; margin-left: 6.4px;
} }
} }
...@@ -437,9 +439,9 @@ export default { ...@@ -437,9 +439,9 @@ export default {
gap: 3.2px; gap: 3.2px;
.card { .card {
width: 168rpx; width: 168px;
height: 188.8rpx; height: 188.8px;
margin-bottom: 22px; margin-bottom: 17.6px;
position: relative; position: relative;
.photo { .photo {
...@@ -449,12 +451,12 @@ export default { ...@@ -449,12 +451,12 @@ export default {
.check-icon { .check-icon {
position: absolute; position: absolute;
top: 8px; top: 6.4px;
left: 8px; left: 6.4px;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%; border-radius: 50%;
width: 24px; width: 19.2px;
height: 24px; height: 19.2px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -462,91 +464,93 @@ export default { ...@@ -462,91 +464,93 @@ export default {
.delete-icon { .delete-icon {
position: absolute; position: absolute;
bottom: 8px; bottom: 6.4px;
left: 8px; left: 6.4px;
background-color: rgba(255, 0, 0, 0.8); background-color: rgba(255, 0, 0, 0.8);
border-radius: 50%; border-radius: 50%;
width: 24px; width: 19.2px;
height: 24px; height: 19.2px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; color: white;
} }
.type { .type {
width: 52px; width: 41.6px;
padding: 0 8px; padding: 0 6.4px;
text-align: center; text-align: center;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border-radius: 11px; border-radius: 8.8px;
font-size: 12px; font-size: 9.6px;
color: #ffffff; color: #ffffff;
text-align: left; text-align: left;
line-height: 20px; line-height: 16px;
font-weight: 400; font-weight: 400;
position: absolute; position: absolute;
right: 13.5px; right: 10.8px;
top: 8px; top: 6.4px;
} }
.photo-info { .photo-info {
text-align: center; text-align: center;
text { text {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 11.2px;
color: #000000; color: #000000;
line-height: 22px; line-height: 17.6px;
font-weight: 400; font-weight: 400;
} }
} }
} }
} }
} }
}
} }
// 按钮
.inspection-button { .inspection-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: fixed; position: fixed;
bottom: 60px; bottom: 25.6px;
width: 280px; width: 224px;
height: 48px; height: 38.4px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%); background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
box-shadow: 0px 10px 24px 0px rgba(51, 104, 246, 0.24); box-shadow: 0px 8px 19.2px 0px rgba(51, 104, 246, 0.24);
border-radius: 27px; border-radius: 21.6px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 20px; font-size: 16px;
line-height: 48px; line-height: 38.4px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
} }
/* 圆形按钮样式 */
.circle-button { .circle-button {
width: 18px; width: 14.4px;
height: 18px; height: 14.4px;
border-radius: 50%; border-radius: 50%;
border: 1.14px solid rgba(199, 199, 199, 1); border: 0.912px solid rgba(199, 199, 199, 1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
/* 选中状态样式 */
&.active { &.active {
border-color: #007aff; border-color: #007aff;
background-color: #3774f6; background-color: #3774f6;
} }
/* 内部小圆点 */
.inner-circle { .inner-circle {
width: 18px; width: 14.4px;
height: 18px; height: 14.4px;
border-radius: 50%; border-radius: 50%;
margin-right: 8px; margin-right: 6.4px;
} }
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论