Your Name
10 months ago
parent
9f60a319e4
commit
e26bce63a7
13 changed files with 835 additions and 375 deletions
|
After Width: | Height: | Size: 225 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 357 KiB |
|
After Width: | Height: | Size: 54 KiB |
@ -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': #E93323, |
// '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'; |
||||||
|
|||||||
@ -0,0 +1,38 @@ |
|||||||
|
<template> |
||||||
|
<div class="order-information"> |
||||||
|
<div class="header">{{ title }}</div> |
||||||
|
<slot></slot> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||||
|
const props = defineProps(['title']) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.order-information { |
||||||
|
width: 100%; |
||||||
|
height: 3.4896rem; |
||||||
|
border: 1px dashed #aaa; |
||||||
|
margin-top: 0.1563rem; |
||||||
|
.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; |
||||||
|
} |
||||||
|
.header::before { |
||||||
|
content: ' '; |
||||||
|
display: block; |
||||||
|
background-color: #ff4e8d; |
||||||
|
width: 0.0156rem; |
||||||
|
height: 0.0833rem; |
||||||
|
margin-right: 0.026rem; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
<template> |
||||||
|
<div class="banner"> |
||||||
|
<div class="nav"></div> |
||||||
|
<div class="main"> |
||||||
|
<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> |
||||||
|
<div v-if="active === 0" class="standard-box"> |
||||||
|
<div class="order-information"> |
||||||
|
<div class="header">订单详情</div> |
||||||
|
<div class="form"> |
||||||
|
<div class="left"> |
||||||
|
<el-form :model="form" label-width="120px"> |
||||||
|
<el-form-item label="配送类型"> |
||||||
|
<el-radio-group v-model="radio1" size="large"> |
||||||
|
<el-radio-button label="配送" /> |
||||||
|
<el-radio-button label="自提" /> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="配送类型"> |
||||||
|
<el-date-picker |
||||||
|
v-model="value1" |
||||||
|
type="date" |
||||||
|
placeholder="Pick a date" |
||||||
|
:default-value="new Date(2010, 9, 1)" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
<div class="right"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-else-if="active === 1" class="fast-box">快速下单</div> |
||||||
|
<div v-else class="batch">批量下单</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||||
|
const active = ref<number>(0) |
||||||
|
const form = reactive({ |
||||||
|
name: '', |
||||||
|
region: '', |
||||||
|
date1: '', |
||||||
|
date2: '', |
||||||
|
delivery: false, |
||||||
|
type: [], |
||||||
|
resource: '', |
||||||
|
desc: '', |
||||||
|
}) |
||||||
|
|
||||||
|
const onSubmit = () => { |
||||||
|
console.log('submit!') |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.banner { |
||||||
|
width: 100%; |
||||||
|
background-color: #fff; |
||||||
|
.nav { |
||||||
|
height: 1.8333rem; |
||||||
|
width: 100%; |
||||||
|
background-color: skyblue; |
||||||
|
} |
||||||
|
.main { |
||||||
|
width: 6.25rem; |
||||||
|
margin: 0 auto; |
||||||
|
.tabs { |
||||||
|
width: 100%; |
||||||
|
height: 0.2083rem; |
||||||
|
background-color: #f3f4f8; |
||||||
|
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%); |
||||||
|
} |
||||||
|
} |
||||||
|
.order-information { |
||||||
|
width: 100%; |
||||||
|
height: 3.4896rem; |
||||||
|
border: 1px dashed #aaa; |
||||||
|
margin-top: 0.1563rem; |
||||||
|
.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; |
||||||
|
} |
||||||
|
.header::before { |
||||||
|
content: ' '; |
||||||
|
display: block; |
||||||
|
background-color: #ff4e8d; |
||||||
|
width: 0.0156rem; |
||||||
|
height: 0.0833rem; |
||||||
|
margin-right: 0.026rem; |
||||||
|
} |
||||||
|
.form { |
||||||
|
display: flex; |
||||||
|
height: 100%; |
||||||
|
.left, |
||||||
|
.right { |
||||||
|
flex: 1; |
||||||
|
padding: 0.1042rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
'postcss-px2rem': { |
||||||
|
remUnit: 192 // 设计稿宽度 / 10，例如设计稿宽度为750px，则remUnit为75
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue