Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Aida_Purchaser_Front
This commit is contained in:
@@ -2,13 +2,21 @@
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import CommodityList from "./commodity-list.vue";
|
||||
import MerchantInfo from "./merchant-info.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import myEvent from '@/utils/myEvent'
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
})
|
||||
const addShopping = (item) => {}
|
||||
const addShopping = (item) => {
|
||||
myEvent.emit('addShopping', item)
|
||||
}
|
||||
const openDetail = (item) => {
|
||||
router.push({name: 'digitalDetail', params: {id: item.id}})
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -26,7 +34,7 @@ const {} = toRefs(data);
|
||||
<MerchantInfo></MerchantInfo>
|
||||
</div>
|
||||
<div class="commodity-list">
|
||||
<CommodityList @addShopping="addShopping"></CommodityList>
|
||||
<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
|
||||
@@ -7,8 +7,9 @@ import feelingWithAiDA from "./feelingWithAiDA.vue";
|
||||
import CommodityItem from "@/components/CommodityItem.vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const emit = defineEmits([
|
||||
'addShopping'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
const list = ref([
|
||||
@@ -27,7 +28,7 @@ const list = ref([
|
||||
},
|
||||
])
|
||||
const addShopping = (item) => {
|
||||
console.log(item);
|
||||
emit('addShopping', item)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import Detail from "./detail/index.vue";
|
||||
import myEvent from '@/utils/myEvent'
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const addShopping = (item) => {
|
||||
myEvent.emit('addShopping', item)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -47,7 +50,7 @@ const {} = toRefs(data);
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<Detail></Detail>
|
||||
<Detail @addShopping="addShopping"></Detail>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
|
||||
315
src/views/digitalDetail/index.vue
Normal file
315
src/views/digitalDetail/index.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import img from "@/assets/images/collectionStory/Rectangle.png";
|
||||
import myEvent from '@/utils/myEvent'
|
||||
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
})
|
||||
const addShopping = (item) => {
|
||||
myEvent.emit('addShopping', item)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="digitalItemDetail">
|
||||
<div class="center">
|
||||
<div class="img-list">
|
||||
<div class="title">
|
||||
<div>Sketch</div>
|
||||
<div>Illustration</div>
|
||||
<div>Product</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
<div class="sketch">
|
||||
<img :src="img" v-for="item in 4" :key="item" alt="">
|
||||
</div>
|
||||
<div class="illustration">
|
||||
<img :src="img" v-for="item in 4" :key="item" alt="">
|
||||
</div>
|
||||
<div class="product">
|
||||
<img :src="img" v-for="item in 4" :key="item" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="img-detail">
|
||||
<div class="back" @click="router.back()">
|
||||
<div class="icon">
|
||||
<svg-icon name="digital-back" size="28"></svg-icon>
|
||||
</div>
|
||||
<span>Back</span>
|
||||
</div>
|
||||
<div class="img-info">
|
||||
<div class="img-type">FEMALE / skirt, blouse, Outwear</div>
|
||||
<div class="img-name">Heritage Layered Set</div>
|
||||
<div class="img-price">$100 <span class="mini-scrollbar">HKD</span></div>
|
||||
</div>
|
||||
<div class="commodity">
|
||||
<div class="info">
|
||||
<img class="profile" :src="img" alt="">
|
||||
<div class="detail">
|
||||
<div class="name">Roaming Clouds</div>
|
||||
<div class="release-time">
|
||||
<div class="icon">
|
||||
<svg-icon name="digital-document" size="24"></svg-icon>
|
||||
</div>
|
||||
<span>12mb | Release in Feb 26, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="introduce">
|
||||
This ensemble artfully merges traditional folk heritage with contemporary tailoring, creating a timeless silhouette that honors ancestral craftsmanship while embracing modern sophistication.
|
||||
</div>
|
||||
</div>
|
||||
<div class="notice">
|
||||
<div class="title">Copyright & License Notice</div>
|
||||
<div class="conter">
|
||||
<div class="contet-title">
|
||||
<div class="icon">
|
||||
<svg-icon name="digital-Info" size="24"></svg-icon>
|
||||
</div>
|
||||
<span>License Included in Asset</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
All products on this platform are digital assets, not physical goods. Purchase grants a usage license only; copyright and intellectual property rights remain with the original creator, unless otherwise stated.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<div class="buy-now">Buy Now</div>
|
||||
<div class="add-cart" @click="addShopping(item)">
|
||||
<div class="icon">
|
||||
<svg-icon name="cart_0" size="24"></svg-icon>
|
||||
</div>
|
||||
Add to Cart
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
:deep(.el-drawer__body){
|
||||
--el-drawer-padding-primary: 2.4rem 3.4rem 2.4rem 6rem;
|
||||
}
|
||||
.digitalItemDetail{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.center{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.img-list{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
--row-width: 33.333%;
|
||||
// --row-width: 29.3rem;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
> .title{
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
> div{
|
||||
width: var(--row-width);
|
||||
line-height: 8.6rem;
|
||||
padding-left: 2.4rem;
|
||||
border-right: 0.5px solid #C4C4C4;
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
background-color: #f5f5f5;
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .img{
|
||||
display: flex;
|
||||
|
||||
> div{
|
||||
display: flex;
|
||||
width: var(--row-width);
|
||||
border-right: 0.5px solid #C4C4C4;
|
||||
flex-direction: column;
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-detail{
|
||||
border-left: 0.5px solid #585858;
|
||||
padding-left: 3.2rem;
|
||||
width: 57rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
.back{
|
||||
display: flex;
|
||||
margin-top: 2.8rem;
|
||||
gap: 1.4rem;
|
||||
align-items: center;
|
||||
width: min-content;
|
||||
cursor: pointer;
|
||||
> span{
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
line-height: 120%;
|
||||
}
|
||||
}
|
||||
.img-info{
|
||||
margin-top: 2.8rem;
|
||||
.img-type{
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
line-height: 120%;
|
||||
color: #808080;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.img-name{
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
line-height: 120%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.img-price{
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
line-height: 120%;
|
||||
> span{
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
line-height: 120%;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
}
|
||||
.commodity{
|
||||
margin-top: 4rem;
|
||||
.info{
|
||||
display: flex;
|
||||
gap: 1.4rem;
|
||||
margin-bottom: 1.4rem;
|
||||
> .profile{
|
||||
width: 5.4rem;
|
||||
height: 5.4rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
> .detail{
|
||||
.name{
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
font-size: 1.8rem;
|
||||
line-height: 100%;
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
.release-time{
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 140%;
|
||||
color: #585858;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.introduce{
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
color: #585858;
|
||||
width: 50.8rem;
|
||||
}
|
||||
}
|
||||
.notice{
|
||||
margin-top: 6rem;
|
||||
.title{
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.8rem;
|
||||
line-height: 140%;
|
||||
}
|
||||
.conter{
|
||||
width: 50.8rem;
|
||||
background-color: #f6f6f6;
|
||||
padding: 2rem;
|
||||
.contet-title{
|
||||
margin-bottom: 1.2rem;
|
||||
display: flex;
|
||||
gap: .8rem;
|
||||
align-items: center;
|
||||
> span{
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 140%;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
line-height: 140%;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button{
|
||||
width: 50.8rem;
|
||||
margin-top: auto;
|
||||
> div{
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
line-height: 120%;
|
||||
letter-spacing: 3%;
|
||||
border: 1px solid #232323;
|
||||
line-height: 4.8rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.buy-now{
|
||||
background-color: #232323;
|
||||
color: #fff;
|
||||
}
|
||||
.add-cart{
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
const emit = defineEmits([
|
||||
'addShopping'
|
||||
'addShopping',
|
||||
'openDetail'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
@@ -47,6 +48,9 @@ const type = ref('All')
|
||||
const addShopping = (item) => {
|
||||
emit('addShopping', item)
|
||||
}
|
||||
const openDetail = (item) => {
|
||||
emit('openDetail', item)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -58,7 +62,7 @@ const {} = toRefs(data);
|
||||
<div class="commodityList">
|
||||
<div class="list">
|
||||
<div class="item" v-for="item in list" :key="item.url">
|
||||
<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
|
||||
<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, onActivated } from "vue";
|
||||
import CommodityList from "./commodity-list.vue";
|
||||
import MerchantInfo from "./merchant-info.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
// 定义组件名称
|
||||
defineOptions({
|
||||
name: 'digitalItem'
|
||||
})
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const digitalItemRef = ref(null)
|
||||
const scrollTop = ref(0)
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
})
|
||||
const addShopping = (item) => {}
|
||||
const openDetail = (item) => {
|
||||
scrollTop.value = digitalItemRef.value.scrollTop
|
||||
router.push({
|
||||
path: '/digitalItem/' + 123,
|
||||
})
|
||||
}
|
||||
onActivated(()=>{
|
||||
digitalItemRef.value.scrollTop = scrollTop.value
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -17,7 +34,7 @@ defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="digitalItem">
|
||||
<div class="digitalItem" ref="digitalItemRef">
|
||||
<div class="header-img">
|
||||
<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
|
||||
<div class="text">
|
||||
@@ -30,7 +47,7 @@ const {} = toRefs(data);
|
||||
<MerchantInfo></MerchantInfo>
|
||||
</div>
|
||||
<div class="commodity-list">
|
||||
<CommodityList @addShopping="addShopping"></CommodityList>
|
||||
<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
{
|
||||
icon: 'cart_0',
|
||||
active_icon: 'cart_1',
|
||||
path: '/cart'
|
||||
path: '/shoppingCart'
|
||||
},
|
||||
{
|
||||
icon: 'user_0',
|
||||
@@ -133,7 +133,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
#main-header {
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
|
||||
40
src/views/shopping-drawer.vue
Normal file
40
src/views/shopping-drawer.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import myEvent from '@/utils/myEvent'
|
||||
import scList from '@/views/shoppingCart/sc-list.vue'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const isShoppingShow = ref(false)
|
||||
const shoppingClose = () => {
|
||||
isShoppingShow.value = false
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
myEvent.add('addShopping', (item) => {
|
||||
isShoppingShow.value = true
|
||||
console.log(item)
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
myEvent.remove('addShopping')
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<el-drawer v-model="isShoppingShow" width="50rem" :close-on-click-modal="false" title="I am the title" :with-header="false">
|
||||
<sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.homeNavBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
46
src/views/shoppingCart/index.vue
Normal file
46
src/views/shoppingCart/index.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="shopping-cart">
|
||||
<div class="content">
|
||||
<sc-list @selected-change="(v) => (selectedList = v)" />
|
||||
<!-- <sc-list is-mini is-view title="Order Summary" /> -->
|
||||
<order-summary :list="selectedList" />
|
||||
</div>
|
||||
<my-footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import orderSummary from './order-summary.vue'
|
||||
import scList from './sc-list.vue'
|
||||
import myFooter from '@/components/Footer.vue'
|
||||
const selectedList = ref([])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.shopping-cart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
--content-top: 4.8rem;
|
||||
> .content {
|
||||
max-width: 126rem;
|
||||
padding-top: var(--content-top);
|
||||
margin: 0 auto;
|
||||
min-height: var(--app-view-height);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
> .sc-list {
|
||||
margin-right: 7.5rem;
|
||||
margin-bottom: 8rem;
|
||||
--sc-list-header-top: var(--content-top);
|
||||
}
|
||||
> .order-summary {
|
||||
position: sticky;
|
||||
top: var(--content-top);
|
||||
max-height: var(--app-view-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
184
src/views/shoppingCart/order-summary.vue
Normal file
184
src/views/shoppingCart/order-summary.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="order-summary">
|
||||
<div class="title">Order Summary</div>
|
||||
<div class="count">
|
||||
<span class="label">Selected</span>
|
||||
<span class="value">{{ brandsList.length }}</span>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<div class="brands-header">
|
||||
<span class="icon"><svg-icon name="order-shop" size="18" /></span>
|
||||
<span class="text">Brands</span>
|
||||
</div>
|
||||
<div class="brands-item" v-for="v in brandsList" :key="v.brand">
|
||||
<span class="label">{{ v.brand }}</span>
|
||||
<span class="value"
|
||||
><span>{{ v.children.length }}</span
|
||||
>item</span
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
<div class="total-file-size">
|
||||
<span class="label">
|
||||
<span class="icon"><svg-icon name="order-file" size="18" /></span>
|
||||
<span class="text">Total File Size</span>
|
||||
</span>
|
||||
<span class="value"
|
||||
>{{ totalSize.size }} <span>{{ totalSize.unit }}</span></span
|
||||
>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<br />
|
||||
<div class="total">
|
||||
<span class="label">Total</span>
|
||||
<span class="value"
|
||||
><span>${{ totalAmount }}</span> HKD</span
|
||||
>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<button class="checkout-btn" custom="black" @click="handleCheckout">CHECKOUT SELECTED</button>
|
||||
<div class="tip">Digital assets. Creator retains copyright.</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
const brandsList = computed(() => {
|
||||
const arr = []
|
||||
props.list.forEach((v) => {
|
||||
const index = arr.findIndex((v_) => v_.brand === v.brand)
|
||||
if (index === -1) {
|
||||
arr.push({
|
||||
brand: v.brand,
|
||||
children: [v]
|
||||
})
|
||||
} else {
|
||||
arr[index].children.push(v)
|
||||
}
|
||||
})
|
||||
return arr
|
||||
})
|
||||
const totalSize = computed(() => {
|
||||
const total = props.list.reduce((pre, cur) => pre + cur.fileSize, 0)
|
||||
const str = FormatBytes(total)
|
||||
return {
|
||||
size: str.split(' ')[0],
|
||||
unit: str.split(' ')[1]
|
||||
}
|
||||
})
|
||||
const totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
|
||||
const handleCheckout = () => {
|
||||
console.log('购买：', props.list)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.order-summary {
|
||||
width: 39.8rem;
|
||||
padding: 3rem 2rem 3rem 2.4rem;
|
||||
height: auto;
|
||||
background-color: #f6f6f6;
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 2.4rem;
|
||||
line-height: 2.3rem;
|
||||
color: #232323;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
> .count {
|
||||
color: #232323;
|
||||
> .label {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
> .value {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
> .hr {
|
||||
margin: 1.2rem 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border-top: 0.1rem solid #c4c4c4;
|
||||
}
|
||||
> .brands-header {
|
||||
justify-content: flex-start;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
> .text {
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .brands-item {
|
||||
margin-bottom: 0.8rem;
|
||||
padding-left: 1rem;
|
||||
font-size: 1.2rem;
|
||||
> .label {
|
||||
text-decoration: underline;
|
||||
color: #585858;
|
||||
}
|
||||
> .value {
|
||||
color: #808080;
|
||||
&:deep(span) {
|
||||
font-size: 1.4rem;
|
||||
color: #585858;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .total-file-size {
|
||||
> .label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
> .value {
|
||||
> span {
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .total {
|
||||
> .value {
|
||||
color: #585858;
|
||||
> span {
|
||||
font-size: 2.2rem;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .checkout-btn {
|
||||
width: 100%;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
> .tip {
|
||||
margin-top: 1rem;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.2rem;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
614
src/views/shoppingCart/sc-list.vue
Normal file
614
src/views/shoppingCart/sc-list.vue
Normal file
@@ -0,0 +1,614 @@
|
||||
<template>
|
||||
<!-- 购物车列表 -->
|
||||
<div class="sc-list" :class="{ mini: isMini, view: isView }">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<span class="text">{{ title || 'Shopping Cart' }}</span>
|
||||
<span class="close" v-if="isMini && !isView" @click="onClose"
|
||||
><svg-icon name="close" size="13"
|
||||
/></span>
|
||||
</div>
|
||||
<div class="options" v-if="!isMini">
|
||||
<div class="left">
|
||||
<el-checkbox
|
||||
:model-value="allSelected"
|
||||
:indeterminate="selectedCount === 0 ? false : selectedCount < list.length"
|
||||
@click="handleAllAllClick"
|
||||
/>
|
||||
<span class="count">{{ selectedCount }} Selected</span>
|
||||
<div class="hr"></div>
|
||||
<div class="btn" @click="handleAllAllClick(true)">Select All</div>
|
||||
<div class="btn" @click="handleAllAllClick(false)">Deselect All</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-select v-model="sortBy" placeholder="Sort By" :teleported="false">
|
||||
<template #label="{ label }">
|
||||
<span class="header-label">Sort By</span>
|
||||
<span class="header-value">{{ label }}</span>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="item in sortByOptions"
|
||||
:key="item.label"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-null" v-show="list.length === 0">
|
||||
<img src="@/assets/images/shopping-cart-null.png" alt="" />
|
||||
<div class="title">Your Cart is empty</div>
|
||||
<div class="tip">Discover new fashion assets and add them to your cart.</div>
|
||||
<button custom v-if="!isMini" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
|
||||
</div>
|
||||
<div class="item" v-for="v in list" :key="v.id">
|
||||
<el-checkbox v-model="v.checked" v-if="!isMini" @change="handleSelectedChange" />
|
||||
<img :src="v.url" />
|
||||
<div class="content">
|
||||
<div class="title">{{ v.title }}</div>
|
||||
<div class="brand">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ v.brand }}</span>
|
||||
</div>
|
||||
<div class="tags" v-if="!isMini || isView">
|
||||
<span v-for="tag in v.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="size" v-if="!isView">
|
||||
<div class="icon"><svg-icon name="order-file" size="18" /></div>
|
||||
<div class="text">
|
||||
<span>{{ FormatBytes(v.fileSize) }}</span>
|
||||
<span v-if="!isMini"
|
||||
> | {{
|
||||
FormatDate(v.date, 'SM D, YYYY, h:mm A')
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount">${{ v.amount }}<span> HKD</span></div>
|
||||
<div class="remove" v-if="!isView">
|
||||
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
|
||||
<span class="text">Remove</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer" v-if="isMini">
|
||||
<div class="total size" v-show="list.length > 0">
|
||||
<span class="label">Total File Size</span>
|
||||
<span class="value"
|
||||
>{{ allTotalSize.size }}<span> {{ allTotalSize.unit }}</span></span
|
||||
>
|
||||
</div>
|
||||
<div class="total" v-show="list.length > 0">
|
||||
<span class="label">Total</span>
|
||||
<span class="value">${{ allAmount }}<span> HKD</span></span>
|
||||
</div>
|
||||
|
||||
<div class="tip" v-if="isView">Digital assets. Creator retains copyright.</div>
|
||||
<button custom="black" v-if="!isView">CHECKOUT</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
const emit = defineEmits(['close', 'selected-change'])
|
||||
const props = defineProps({
|
||||
title: { type: String, default: '' },
|
||||
isMini: { type: Boolean, default: false },
|
||||
isView: { type: Boolean, default: false }
|
||||
})
|
||||
const allTotalSize = computed(() => {
|
||||
const total = list.value.reduce((pre, cur) => pre + cur.fileSize, 0)
|
||||
const str = FormatBytes(total)
|
||||
return {
|
||||
size: str.split(' ')[0],
|
||||
unit: str.split(' ')[1]
|
||||
}
|
||||
})
|
||||
const allAmount = computed(() => list.value.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
|
||||
const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
|
||||
const allSelected = computed(() => list.value.every((v) => v.checked))
|
||||
const sortBy = ref('')
|
||||
const sortByOptions = ref([
|
||||
{
|
||||
label: 'Default',
|
||||
value: 'Default'
|
||||
},
|
||||
{
|
||||
label: 'Selected First',
|
||||
value: 'Selected First'
|
||||
},
|
||||
{
|
||||
label: 'Date Added',
|
||||
value: 'Date Added'
|
||||
}
|
||||
])
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
id: 1,
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-1.png',
|
||||
title: 'North Outfit Set',
|
||||
brand: 'Roaming Clouds',
|
||||
fileSize: 1024, // kb
|
||||
date: '2026-5-20 5:20',
|
||||
amount: 49.99,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
|
||||
title: 'Weekend Drift Co-ord',
|
||||
brand: 'Urban Line Edit',
|
||||
fileSize: 1225, // kb
|
||||
date: '2026-5-21 13:14',
|
||||
amount: 9.99,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png',
|
||||
title: 'Static Street Suit',
|
||||
brand: 'Off Grid Apparel',
|
||||
fileSize: 1024 * 18, // kb
|
||||
date: '2026-5-21 13:14',
|
||||
amount: 12,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png',
|
||||
title: 'Maison Contour Suit',
|
||||
brand: 'Ivory Muse Studio',
|
||||
fileSize: 100, // kb
|
||||
date: '2026-5-21 13:14',
|
||||
amount: 18,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png',
|
||||
title: 'Prime Atelier Set',
|
||||
brand: 'Ivory Muse Studio',
|
||||
fileSize: 1024 * 24, // kb
|
||||
date: '2026-5-21 13:14',
|
||||
amount: 20,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
checked: false
|
||||
}
|
||||
])
|
||||
const handleAllAllClick = (checked?: boolean) => {
|
||||
const checked_ = typeof checked === 'boolean' ? checked : !allSelected.value
|
||||
list.value.forEach((v) => (v.checked = checked_))
|
||||
handleSelectedChange()
|
||||
}
|
||||
const handleSelectedChange = () => {
|
||||
const arr = list.value.filter((v) => v.checked)
|
||||
emit('selected-change', arr)
|
||||
}
|
||||
const onClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
onMounted(() => {
|
||||
handleSelectedChange()
|
||||
})
|
||||
const handleExploreClick = () => {
|
||||
console.log('探索')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sc-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.mini {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
--sc-list-title-font-size: 2rem;
|
||||
--sc-list-title-padding-bottom: 3rem;
|
||||
--sc-list-list-item-padding: 2rem 0;
|
||||
--sc-list-list-item-img-width: 10.4rem;
|
||||
--sc-list-list-item-img-height: 13.2rem;
|
||||
--sc-list-list-item-content-margin: 0 2rem;
|
||||
--sc-list-list-item-margin-bottom: 0.8rem;
|
||||
--sc-list-list-item-title-font-size: 1.6rem;
|
||||
--sc-list-list-item-brand-font-size: 1.4rem;
|
||||
--sc-list-list-item-amount-font-size: 1.8rem;
|
||||
--sc-list-list-item-currency-font-size: 1.6rem;
|
||||
> .list {
|
||||
flex: 1;
|
||||
min-height: 30rem;
|
||||
overflow-y: auto;
|
||||
> .item {
|
||||
> .content {
|
||||
align-self: baseline;
|
||||
}
|
||||
> .right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
height: var(--sc-list-list-item-img-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mini.view {
|
||||
--sc-list-title-padding-bottom: 2.4rem;
|
||||
--sc-list-list-item-img-width: 9.6rem;
|
||||
--sc-list-list-item-img-height: 12.2rem;
|
||||
--sc-list-list-item-padding: 1.6rem;
|
||||
--sc-list-list-item-margin-bottom: 0.8rem;
|
||||
--sc-list-list-item-title-font-size: 2rem;
|
||||
> .header {
|
||||
border: none;
|
||||
}
|
||||
> .list {
|
||||
> .item {
|
||||
> .content {
|
||||
margin-top: 1.2rem;
|
||||
> .tags {
|
||||
> .tag {
|
||||
min-width: 0;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .footer {
|
||||
margin-top: 4.1rem;
|
||||
> .total {
|
||||
margin-bottom: 1.7rem;
|
||||
> .label {
|
||||
font-family: KaiseiOpti-Medium;
|
||||
font-size: 2rem;
|
||||
color: #232323;
|
||||
}
|
||||
> .value {
|
||||
font-family: KaiseiOpti-Medium;
|
||||
font-size: 2.2rem;
|
||||
> span {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.2rem;
|
||||
color: #808080;
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.mini) {
|
||||
> .header {
|
||||
position: sticky;
|
||||
top: var(--sc-list-header-top, 0);
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(var(--sc-list-header-top, 0) + 2px);
|
||||
transform: translateY(-100%);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
> .list {
|
||||
> .list-null {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .header {
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
padding-bottom: var(--sc-list-title-padding-bottom, 3rem);
|
||||
> .title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-list-title-font-size, 4rem);
|
||||
color: #121212;
|
||||
}
|
||||
> .close {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .options {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .count {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.8rem;
|
||||
color: #232323;
|
||||
}
|
||||
> .hr {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 0.1rem solid #c4c4c4;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
> .btn {
|
||||
margin-right: 1.2rem;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.8rem;
|
||||
color: #979797;
|
||||
text-decoration: underline;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .list {
|
||||
// height: 1000px;
|
||||
> .list-null {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
> img {
|
||||
width: 14rem;
|
||||
height: auto;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 1.6rem;
|
||||
color: #979797;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
> .tip {
|
||||
width: 50%;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #979797;
|
||||
}
|
||||
> button {
|
||||
min-width: 30rem;
|
||||
height: 4.4rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
font-family: KaiseiOpti-Medium;
|
||||
font-size: 1.6rem;
|
||||
color: #979797;
|
||||
margin-top: 4.2rem;
|
||||
}
|
||||
}
|
||||
> .item {
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
padding: var(--sc-list-list-item-padding, 2.4rem 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: var(--sc-list-list-item-img-width, 14.8rem);
|
||||
height: var(--sc-list-list-item-img-height, 18.8rem);
|
||||
object-fit: contain;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
margin: var(--sc-list-list-item-content-margin, 0 4rem);
|
||||
> * {
|
||||
margin-bottom: var(--sc-list-list-item-margin-bottom, 1.6rem);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-list-list-item-title-font-size, 2.4rem);
|
||||
color: #232323;
|
||||
}
|
||||
> .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .text {
|
||||
font-size: var(--sc-list-list-item-brand-font-size, 1.6rem);
|
||||
text-decoration: underline;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
> .tag {
|
||||
min-width: 8.8rem;
|
||||
height: 2.4rem;
|
||||
line-height: 2.4rem;
|
||||
border-radius: 2.4rem;
|
||||
font-size: 1.4rem;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
color: #8f8f8f;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
> .size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
align-self: end;
|
||||
> .amount {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-list-list-item-amount-font-size, 2.2rem);
|
||||
color: #232323;
|
||||
> span {
|
||||
font-size: var(--sc-list-list-item-currency-font-size, 1.4rem);
|
||||
color: #585858;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
> .remove {
|
||||
margin-top: var(--sc-list-list-item-remove-margin-top, 9rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
> .icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .footer {
|
||||
margin-top: 3rem;
|
||||
> .total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .label {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 1.6rem;
|
||||
color: #121212;
|
||||
}
|
||||
> .value {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 2rem;
|
||||
color: #232323;
|
||||
> span {
|
||||
font-family: KaiseiOpti-Medium;
|
||||
font-size: 1.6rem;
|
||||
color: #585858;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
> button {
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
--button-font-size: 1.4rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sc-list:deep(.el-checkbox) {
|
||||
margin-right: 3rem;
|
||||
height: auto;
|
||||
--el-checkbox-font-size: 1.4rem;
|
||||
--el-checkbox-input-width: 2.4rem;
|
||||
--el-checkbox-input-height: 2.4rem;
|
||||
--el-checkbox-checked-bg-color: #000;
|
||||
--el-checkbox-checked-input-border-color: #000;
|
||||
--el-checkbox-input-border: 0.1rem solid #232323;
|
||||
--el-checkbox-bg-color: #fff;
|
||||
--el-checkbox-border-radius: 0;
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
|
||||
height: 0.2rem;
|
||||
width: 65%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
.el-checkbox__inner:after {
|
||||
width: 0.6rem;
|
||||
height: 1.3rem;
|
||||
border-width: 0.2rem;
|
||||
}
|
||||
}
|
||||
.sc-list:deep(.el-select) {
|
||||
width: 15rem;
|
||||
--el-border-radius-base: 0;
|
||||
--el-select-input-color: rgba(0, 0, 0, 0.5);
|
||||
--el-select-input-font-size: 1rem;
|
||||
.el-select__wrapper {
|
||||
font-size: 1.07rem;
|
||||
padding: 0 0.7rem;
|
||||
line-height: 1;
|
||||
min-height: 0;
|
||||
height: 2.2rem;
|
||||
|
||||
.header-label {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
.header-value {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
.el-select__popper {
|
||||
--el-popper-border-radius: 0;
|
||||
border: 0.1rem solid #d0d0d0;
|
||||
.el-select-dropdown__list {
|
||||
padding: 0;
|
||||
> .el-select-dropdown__item {
|
||||
margin-bottom: 0.89rem;
|
||||
color: #232323;
|
||||
font-size: 1.069rem;
|
||||
height: 2.68rem;
|
||||
line-height: 2.68rem;
|
||||
padding: 0 1.4rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.is-selected {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user