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 { |
||||
position: relative; |
||||
input { |
||||
display: none; |
||||
} |
||||
.icon { |
||||
position: relative; |
||||
left: 0px; |
||||
top: 7px; |
||||
display: inline-block; |
||||
width: 13px; |
||||
height: 13px; |
||||
border: 1px solid #cccccc; |
||||
border-radius: 50%; |
||||
-webkit-transform: translate(0, -50%); |
||||
-moz-transform: translate(0, -50%); |
||||
-o-transform: translate(0, -50%); |
||||
-ms-transform: translate(0, -50%); |
||||
transform: translate(0, -50%); |
||||
} |
||||
input:checked + .icon { |
||||
background-color: #e93323; |
||||
border-color: #e93323; |
||||
background-image: url("../images/enter.png"); |
||||
-webkit-background-size: 10px 8px; |
||||
-moz-background-size: 10px 8px; |
||||
background-size: 10px 8px; |
||||
background-repeat: no-repeat; |
||||
background-position: center center; |
||||
} |
||||
} |
||||
// /* 单选框和多选框 */ |
||||
// .checkbox-wrapper { |
||||
// position: relative; |
||||
// input { |
||||
// display: none; |
||||
// } |
||||
// .icon { |
||||
// position: relative; |
||||
// left: 0px; |
||||
// top: 7px; |
||||
// display: inline-block; |
||||
// width: 13px; |
||||
// height: 13px; |
||||
// border: 1px solid #cccccc; |
||||
// border-radius: 50%; |
||||
// -webkit-transform: translate(0, -50%); |
||||
// -moz-transform: translate(0, -50%); |
||||
// -o-transform: translate(0, -50%); |
||||
// -ms-transform: translate(0, -50%); |
||||
// transform: translate(0, -50%); |
||||
// } |
||||
// input:checked + .icon { |
||||
// background-color: #e93323; |
||||
// border-color: #e93323; |
||||
// background-image: url("../images/enter.png"); |
||||
// -webkit-background-size: 10px 8px; |
||||
// -moz-background-size: 10px 8px; |
||||
// background-size: 10px 8px; |
||||
// background-repeat: no-repeat; |
||||
// background-position: center center; |
||||
// } |
||||
// } |
||||
|
||||
|
||||
.Checkbox { |
||||
position: absolute; |
||||
visibility: hidden; |
||||
outline: none; |
||||
background: #fff; |
||||
} |
||||
.Checkbox+label { |
||||
position:absolute; |
||||
width: 16px; |
||||
height: 16px; |
||||
border: 1px solid #9B9B9B; |
||||
border-radius: 50%; |
||||
background-color:#fff; |
||||
left: 11px; |
||||
top: 50%; |
||||
margin-top: -8px; |
||||
} |
||||
.Checkbox:checked+label:after { |
||||
content: ""; |
||||
position: absolute; |
||||
left: 3px; |
||||
top:3px; |
||||
width: 6px; |
||||
height: 3px; |
||||
border: 2px solid #9B9B9B; |
||||
border-top-color: transparent; |
||||
border-right-color: transparent; |
||||
transform: rotate(-45deg); |
||||
-ms-transform: rotate(-45deg); |
||||
-moz-transform: rotate(-45deg); |
||||
-webkit-transform: rotate(-45deg); |
||||
} |
||||
// .Checkbox { |
||||
// position: absolute; |
||||
// visibility: hidden; |
||||
// outline: none; |
||||
// background: #fff; |
||||
// } |
||||
// .Checkbox+label { |
||||
// position:absolute; |
||||
// width: 16px; |
||||
// height: 16px; |
||||
// border: 1px solid #9B9B9B; |
||||
// border-radius: 50%; |
||||
// background-color:#fff; |
||||
// left: 11px; |
||||
// top: 50%; |
||||
// margin-top: -8px; |
||||
// } |
||||
// .Checkbox:checked+label:after { |
||||
// content: ""; |
||||
// position: absolute; |
||||
// left: 3px; |
||||
// top:3px; |
||||
// width: 6px; |
||||
// height: 3px; |
||||
// border: 2px solid #9B9B9B; |
||||
// border-top-color: transparent; |
||||
// border-right-color: transparent; |
||||
// transform: rotate(-45deg); |
||||
// -ms-transform: rotate(-45deg); |
||||
// -moz-transform: rotate(-45deg); |
||||
// -webkit-transform: rotate(-45deg); |
||||
// } |
||||
@ -1,26 +1,26 @@ |
||||
$-colors: ( |
||||
'primary': ( |
||||
'base': #FF94D4, |
||||
), |
||||
'success': ( |
||||
'base': #67c23a, |
||||
), |
||||
'warning': ( |
||||
'base': #e6a23c, |
||||
), |
||||
'danger': ( |
||||
'base': #f56c6c, |
||||
), |
||||
'error': ( |
||||
'base': #E93323, |
||||
), |
||||
'info': ( |
||||
'base': #909399, |
||||
), |
||||
); |
||||
// $-colors: ( |
||||
// 'primary': ( |
||||
// 'base': #E93323, |
||||
// ), |
||||
// 'success': ( |
||||
// 'base': #67c23a, |
||||
// ), |
||||
// 'warning': ( |
||||
// 'base': #e6a23c, |
||||
// ), |
||||
// 'danger': ( |
||||
// 'base': #f56c6c, |
||||
// ), |
||||
// 'error': ( |
||||
// 'base': #E93323, |
||||
// ), |
||||
// 'info': ( |
||||
// 'base': #909399, |
||||
// ), |
||||
// ); |
||||
|
||||
@forward 'element-plus/theme-chalk/src/common/var.scss' with ( |
||||
$colors: $-colors |
||||
); |
||||
// @forward 'element-plus/theme-chalk/src/common/var.scss' with ( |
||||
// $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