提交 2793a121 authored 作者: JaxBBLL's avatar JaxBBLL
...@@ -105,9 +105,10 @@ ...@@ -105,9 +105,10 @@
.search-com-left { .search-com-left {
display: flex; display: flex;
align-items: center; align-items: center;
::v-deep .uni-select{
border: none !important;
}
.uni-search-item { .uni-search-item {
width: 132px;
height: 36px; height: 36px;
margin-right: 16px; margin-right: 16px;
background: #fff; background: #fff;
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<uni-nav-bar v-else :fixed="true" background-color="#FFF" status-bar leftWidth="300" rightWidth="300"> <uni-nav-bar v-else :fixed="true" background-color="#FFF" status-bar leftWidth="300" rightWidth="300">
<block slot="left"> <block slot="left">
<view class="header-left" @click="headerClose"> <view class="header-left" @click="headerClose">
<text class="close">X</text> <uni-icons size="21" type="closeempty" class="close"></uni-icons>
<view class="selected-count"> 已选择{{ selectedCount }}张图片</view> <view class="selected-count"> 已选择{{ selectedCount }}张图片</view>
</view> </view>
</block> </block>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
class="iconfont icon-quanxuan" class="iconfont icon-quanxuan"
@click.stop="toggleSelectAll" @click.stop="toggleSelectAll"
></text> --> ></text> -->
<text class="iconfont icon-shanchu" @click.stop="deletePhotos">删除</text> <text class="iconfont icon-shanchu" @click.stop="deletePhotos"></text>
</view> </view>
</block> </block>
</uni-nav-bar> </uni-nav-bar>
...@@ -37,23 +37,23 @@ ...@@ -37,23 +37,23 @@
<view class="group-header"> <view class="group-header">
<view class="circle-button" :class="{ active: isDateAllSelected(group, date) }" <view class="circle-button" :class="{ active: isDateAllSelected(group, date) }"
@click.stop="toggleSelectDate(date)"> @click.stop="toggleSelectDate(date)">
<text v-if="isDateAllSelected(group, date)" class="iconfont icon-wancheng"></text>
</view> </view>
<view v-if="isDateAllSelected(group, date)" class="iconfont icon-wancheng" @click.stop="toggleSelectDate(date)"></view>
<text class="date">{{ date }}</text> <text class="date">{{ date }}</text>
</view> </view>
<view class="card-list"> <view class="card-list">
<view v-for="(photo, index) in group" :key="index" class="card" <view v-for="(photo, index) in group" :key="index" class="card"
@click="previewPhoto(photo, index)"> @click="previewPhoto(photo, index)">
<view class="mask" v-if="photo.selected"></view>
<image :src="photo.imgPath" mode="aspectFill" class="photo"></image> <image :src="photo.imgPath" mode="aspectFill" class="photo"></image>
<view class="photo-mask"> <view class="photo-mask">
<view>照片编号:{{photo.id}}</view>
<view>拍摄时间:{{photo.time}}</view> <view>拍摄时间:{{photo.time}}</view>
<view>数据同步:{{ photo.synchronization ? "已同步" : "待同步"}}</view>
</view> </view>
<view class="check-icon" :class="{ active: photo.selected }" <view class="check-icon" :class="{ active: photo.selected }"
@click.stop="toggleSelect(photo)"> @click.stop="toggleSelect(photo)">
<text v-if="photo.selected" class="iconfont icon-wancheng"></text>
</view> </view>
<view v-if="photo.selected" class=" check-icon iconfont icon-wancheng" @click.stop="toggleSelect(photo)"></view>
<!-- <text <!-- <text
class="delete-icon iconfont icon-shanchu" class="delete-icon iconfont icon-shanchu"
@click.stop="deletePhoto(photo)" @click.stop="deletePhoto(photo)"
...@@ -355,7 +355,7 @@ ...@@ -355,7 +355,7 @@
.header-left { .header-left {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center;
.close { .close {
font-size: 20px; font-size: 20px;
} }
...@@ -429,32 +429,28 @@ ...@@ -429,32 +429,28 @@
line-height: 14.4px; line-height: 14.4px;
border-radius: 50%; border-radius: 50%;
border: 1px solid rgba(199, 199, 199, 1); border: 1px solid rgba(199, 199, 199, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
margin-bottom: 2px;
text-align: center; text-align: center;
position: absolute;
bottom: 4px;
.icon-wancheng {
color: #3774f6; }
font-size: 16px;
border: 1px solid #fff; .icon-wancheng {
background-color: #fff; color: #3774f6;
border-radius: 50%; font-size: 14.4px;
} border: 1px solid #fff;
background-color: #fff;
border-radius: 50%;
position: absolute;
} }
.date { .date {
font-size: 20.8px; font-size: 14.4px;
color: #000000; color: #000000;
line-height: 14.4px; line-height: 14.4px;
font-weight: 500; font-weight: bold;
margin-left: 18px; margin-left: 6.4px;
margin-bottom: 6.4px;
} }
} }
...@@ -486,15 +482,18 @@ ...@@ -486,15 +482,18 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
line-height: 20px; line-height: 1;
z-index: 4;
.icon-wancheng {
color: #3774f6;
font-size: 20px; }
// border: 1px solid #fff;
background-color: #fff; .icon-wancheng {
border-radius: 50%; color: #3774f6;
} font-size: 20px;
// border: 1px solid #fff;
background-color: #fff;
border-radius: 50%;
} }
.delete-icon { .delete-icon {
...@@ -577,4 +576,12 @@ ...@@ -577,4 +576,12 @@
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
} }
.mask {
z-index: 2;
background-color: rgba(255, 255, 255, 0.24);
position: absolute;
width: 168px;
height: 168px;
}
</style> </style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论