czg_team/cashier-admin
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增订单列表对接数据

Browse Source
This commit is contained in:
gyq
2024-03-14 16:00:19 +08:00
parent 87d084dfed
commit 0998c30b1a
17 changed files with 701 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/views/product/components/addGroup.vue
View File

@@ -12,9 +12,12 @@
</el-button>
</div>
<div class="shop_list">
<div class="item" v-for="(item, index) in productIds" :key="item.id" :data-index="index + 1"
<div class="item_wrap" v-for="(item, index) in productIds" :key="item.id"
@click="productIds.splice(index, 1)">
<el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
<div class="item" :data-index="index + 1">
<el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</el-form-item>
@@ -133,60 +136,70 @@ export default {
display: flex;
flex-wrap: wrap;
.item {
.item_wrap {
$size: 80px;
$radius: 4px;
width: $size;
height: $size;
border-radius: $radius;
overflow: hidden;
position: relative;
margin-right: 10px;
margin-top: 10px;
&:hover {
cursor: pointer;
.item {
$radius: 4px;
width: $size;
height: $size;
border-radius: $radius;
overflow: hidden;
position: relative;
margin-right: 10px;
margin-top: 10px;
&:hover {
cursor: pointer;
&::before {
transform: translateY(0);
}
}
&::after {
content: attr(data-index);
font-size: 12px;
height: 20px;
display: flex;
padding: 0 10px;
border-radius: 0 0 $radius 0;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
&::before {
transform: translateY(0);
content: '删除';
font-size: 12px;
width: 100%;
height: 20px;
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
transform: translateY(100%);
transition: all .1s ease-in-out;
}
}
&::after {
content: attr(data-index);
font-size: 12px;
height: 20px;
display: flex;
padding: 0 10px;
border-radius: 0 0 $radius 0;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
&::before {
content: '删除';
font-size: 12px;
width: 100%;
height: 20px;
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
transform: translateY(100%);
transition: all .1s ease-in-out;
.name {
width: $size;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}