Compare commits
No commits in common. 'b9f38708bf9ee8079b37ce93a28c7fbdedd663cb' and 'e26bce63a788904a214e4c63336e5012a47bc3a1' have entirely different histories.
b9f38708bf
...
e26bce63a7
5 changed files with 114 additions and 822 deletions
@ -1,66 +1,66 @@ |
|||||||
/* 单选框和多选框 */ |
// /* 单选框和多选框 */ |
||||||
.checkbox-wrapper { |
// .checkbox-wrapper { |
||||||
position: relative; |
// position: relative; |
||||||
input { |
// input { |
||||||
display: none; |
// display: none; |
||||||
} |
// } |
||||||
.icon { |
// .icon { |
||||||
position: relative; |
// position: relative; |
||||||
left: 0px; |
// left: 0px; |
||||||
top: 7px; |
// top: 7px; |
||||||
display: inline-block; |
// display: inline-block; |
||||||
width: 13px; |
// width: 13px; |
||||||
height: 13px; |
// height: 13px; |
||||||
border: 1px solid #cccccc; |
// border: 1px solid #cccccc; |
||||||
border-radius: 50%; |
// border-radius: 50%; |
||||||
-webkit-transform: translate(0, -50%); |
// -webkit-transform: translate(0, -50%); |
||||||
-moz-transform: translate(0, -50%); |
// -moz-transform: translate(0, -50%); |
||||||
-o-transform: translate(0, -50%); |
// -o-transform: translate(0, -50%); |
||||||
-ms-transform: translate(0, -50%); |
// -ms-transform: translate(0, -50%); |
||||||
transform: translate(0, -50%); |
// transform: translate(0, -50%); |
||||||
} |
// } |
||||||
input:checked + .icon { |
// input:checked + .icon { |
||||||
background-color: #e93323; |
// background-color: #e93323; |
||||||
border-color: #e93323; |
// border-color: #e93323; |
||||||
background-image: url("../images/enter.png"); |
// background-image: url("../images/enter.png"); |
||||||
-webkit-background-size: 10px 8px; |
// -webkit-background-size: 10px 8px; |
||||||
-moz-background-size: 10px 8px; |
// -moz-background-size: 10px 8px; |
||||||
background-size: 10px 8px; |
// background-size: 10px 8px; |
||||||
background-repeat: no-repeat; |
// background-repeat: no-repeat; |
||||||
background-position: center center; |
// background-position: center center; |
||||||
} |
// } |
||||||
} |
// } |
||||||
|
|
||||||
|
|
||||||
.Checkbox { |
// .Checkbox { |
||||||
position: absolute; |
// position: absolute; |
||||||
visibility: hidden; |
// visibility: hidden; |
||||||
outline: none; |
// outline: none; |
||||||
background: #fff; |
// background: #fff; |
||||||
} |
// } |
||||||
.Checkbox+label { |
// .Checkbox+label { |
||||||
position:absolute; |
// position:absolute; |
||||||
width: 16px; |
// width: 16px; |
||||||
height: 16px; |
// height: 16px; |
||||||
border: 1px solid #9B9B9B; |
// border: 1px solid #9B9B9B; |
||||||
border-radius: 50%; |
// border-radius: 50%; |
||||||
background-color:#fff; |
// background-color:#fff; |
||||||
left: 11px; |
// left: 11px; |
||||||
top: 50%; |
// top: 50%; |
||||||
margin-top: -8px; |
// margin-top: -8px; |
||||||
} |
// } |
||||||
.Checkbox:checked+label:after { |
// .Checkbox:checked+label:after { |
||||||
content: ""; |
// content: ""; |
||||||
position: absolute; |
// position: absolute; |
||||||
left: 3px; |
// left: 3px; |
||||||
top:3px; |
// top:3px; |
||||||
width: 6px; |
// width: 6px; |
||||||
height: 3px; |
// height: 3px; |
||||||
border: 2px solid #9B9B9B; |
// border: 2px solid #9B9B9B; |
||||||
border-top-color: transparent; |
// border-top-color: transparent; |
||||||
border-right-color: transparent; |
// border-right-color: transparent; |
||||||
transform: rotate(-45deg); |
// transform: rotate(-45deg); |
||||||
-ms-transform: rotate(-45deg); |
// -ms-transform: rotate(-45deg); |
||||||
-moz-transform: rotate(-45deg); |
// -moz-transform: rotate(-45deg); |
||||||
-webkit-transform: rotate(-45deg); |
// -webkit-transform: rotate(-45deg); |
||||||
} |
// } |
||||||
@ -1,26 +1,26 @@ |
|||||||
$-colors: ( |
// $-colors: ( |
||||||
'primary': ( |
// 'primary': ( |
||||||
'base': #FF94D4, |
// 'base': #E93323, |
||||||
), |
// ), |
||||||
'success': ( |
// 'success': ( |
||||||
'base': #67c23a, |
// 'base': #67c23a, |
||||||
), |
// ), |
||||||
'warning': ( |
// 'warning': ( |
||||||
'base': #e6a23c, |
// 'base': #e6a23c, |
||||||
), |
// ), |
||||||
'danger': ( |
// 'danger': ( |
||||||
'base': #f56c6c, |
// 'base': #f56c6c, |
||||||
), |
// ), |
||||||
'error': ( |
// 'error': ( |
||||||
'base': #E93323, |
// 'base': #E93323, |
||||||
), |
// ), |
||||||
'info': ( |
// 'info': ( |
||||||
'base': #909399, |
// 'base': #909399, |
||||||
), |
// ), |
||||||
); |
// ); |
||||||
|
|
||||||
@forward 'element-plus/theme-chalk/src/common/var.scss' with ( |
// @forward 'element-plus/theme-chalk/src/common/var.scss' with ( |
||||||
$colors: $-colors |
// $colors: $-colors |
||||||
); |
// ); |
||||||
|
|
||||||
@use './dark.scss'; |
// @use './dark.scss'; |
||||||
|
|||||||
@ -1,224 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="main"> |
|
||||||
<div class="banner"> |
|
||||||
<div class="order-information"> |
|
||||||
<div class="header">接单中心</div> |
|
||||||
<div class="condition-scarch"> |
|
||||||
<ul> |
|
||||||
<li> |
|
||||||
<div class="label">收货地址：</div> |
|
||||||
<el-select |
|
||||||
v-model="value" |
|
||||||
class="m-2" |
|
||||||
placeholder="请选择地址信息" |
|
||||||
style="width: 1.875rem; margin-right: 0.0781rem" |
|
||||||
> |
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||||
</el-select> |
|
||||||
<el-input style="width: 1.4583rem" v-model="input" placeholder="详细地址街道..." /> |
|
||||||
<div class="search-btn">收索</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<div class="label">成交价：</div> |
|
||||||
<div class="price-whel"> |
|
||||||
<div tabindex="1">不限</div> |
|
||||||
<div tabindex="2">100元以下</div> |
|
||||||
<div tabindex="3">100-200元</div> |
|
||||||
<div tabindex="4">200-300元</div> |
|
||||||
<div tabindex="5">300-400元</div> |
|
||||||
<div tabindex="6">400元以上</div> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<div class="label">收货时间：</div> |
|
||||||
<div class="price-whel"> |
|
||||||
<div tabindex="1">不限</div> |
|
||||||
<div tabindex="2">今天</div> |
|
||||||
<div tabindex="3">1-3天</div> |
|
||||||
<div tabindex="4">4-7天</div> |
|
||||||
<div tabindex="6">1周以上</div> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="tabs"> |
|
||||||
<div :class="active === 0 ? 'standard active' : 'standard'" @click="active = 0">综合排序</div> |
|
||||||
<div :class="active === 1 ? 'standard active' : 'standard'" @click="active = 1">按配送时间</div> |
|
||||||
<div :class="active === 2 ? 'standard active' : 'standard'" @click="active = 2">按下单时间</div> |
|
||||||
<div :class="active === 3 ? 'standard active sort' : 'standard sort'" @click="active = 3"> |
|
||||||
按订单金额 |
|
||||||
<div v-if="active==3" class="sort-box"> |
|
||||||
<div :class="activeSort == 0 ? 'ascending-orde active-sort' : 'ascending-orde'" @click="activeSort = 0"> |
|
||||||
<el-icon><CaretTop /></el-icon> |
|
||||||
</div> |
|
||||||
<div @click="activeSort = 1" :class="activeSort == 1 ? 'descending active-sort' : 'descending'"> |
|
||||||
<el-icon><CaretBottom /></el-icon> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div v-else class="sort-box"> |
|
||||||
<div class="ascending-orde"> |
|
||||||
<el-icon><CaretTop /></el-icon> |
|
||||||
</div> |
|
||||||
<div class="descending"> |
|
||||||
<el-icon><CaretBottom /></el-icon> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
||||||
import { CaretTop, CaretBottom } from '@element-plus/icons-vue' |
|
||||||
|
|
||||||
const value = ref('') |
|
||||||
const active = ref(0) |
|
||||||
const input = ref('') |
|
||||||
const activeSort = ref(0) |
|
||||||
const options = [ |
|
||||||
{ |
|
||||||
value: 'Option1', |
|
||||||
label: 'Option1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'Option2', |
|
||||||
label: 'Option2', |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'Option3', |
|
||||||
label: 'Option3', |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'Option4', |
|
||||||
label: 'Option4', |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: 'Option5', |
|
||||||
label: 'Option5', |
|
||||||
}, |
|
||||||
] |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.main { |
|
||||||
width: 100%; |
|
||||||
.banner { |
|
||||||
width: 6.25rem; |
|
||||||
margin: 0 auto; |
|
||||||
.order-information { |
|
||||||
width: 100%; |
|
||||||
// height: 3.4896rem; |
|
||||||
margin-top: 0.026rem; |
|
||||||
background-color: #fff; |
|
||||||
.header { |
|
||||||
// background-color: #f3f4f8; |
|
||||||
height: 0.2083rem; |
|
||||||
color: #252b3a; |
|
||||||
font-size: 0.0833rem; |
|
||||||
line-height: 0.2083rem; |
|
||||||
padding: 0 0.2604rem; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
font-weight: 700; |
|
||||||
border-bottom: 1px solid #e1e1e3; |
|
||||||
} |
|
||||||
.header::before { |
|
||||||
content: ' '; |
|
||||||
display: block; |
|
||||||
background-color: #ff4e8d; |
|
||||||
width: 0.0156rem; |
|
||||||
height: 0.0833rem; |
|
||||||
margin-right: 0.026rem; |
|
||||||
} |
|
||||||
.condition-scarch { |
|
||||||
padding: 0.1042rem 0.3542rem; |
|
||||||
ul { |
|
||||||
li { |
|
||||||
list-style: none; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
color: #252b3a; |
|
||||||
font-size: 0.0729rem; |
|
||||||
margin:.1042rem 0; |
|
||||||
.label { |
|
||||||
width: 0.3646rem; |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
.search-btn { |
|
||||||
width: 0.4167rem; |
|
||||||
height: 0.1771rem; |
|
||||||
color: #fff; |
|
||||||
text-align: center; |
|
||||||
font-size: 0.0729rem; |
|
||||||
line-height: 0.1771rem; |
|
||||||
border-radius: 0.1042rem; |
|
||||||
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%); |
|
||||||
margin-left: 0.0521rem; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.price-whel { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
div { |
|
||||||
margin-right: 0.2135rem; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
div:focus, |
|
||||||
div:hover { |
|
||||||
color: #ff4e8d; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.tabs { |
|
||||||
width: 100%; |
|
||||||
height: 0.2083rem; |
|
||||||
background-color: #fff; |
|
||||||
display: flex; |
|
||||||
margin-top: 0.2344rem; |
|
||||||
margin-bottom: 0.1302rem; |
|
||||||
.standard { |
|
||||||
width: 0.7292rem; |
|
||||||
height: 100%; |
|
||||||
color: #252b3a; |
|
||||||
font-size: 0.0729rem; |
|
||||||
text-align: center; |
|
||||||
line-height: 0.2083rem; |
|
||||||
border-radius: 0.0313rem; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.active { |
|
||||||
color: #fff; |
|
||||||
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%); |
|
||||||
} |
|
||||||
.sort { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
.sort-box { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
margin-left: 0.0365rem; |
|
||||||
color: #b1b6c1; |
|
||||||
div { |
|
||||||
line-height: 0; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
.active-sort { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
.descending{ |
|
||||||
margin-top: -5px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue