fix
This commit is contained in:
BIN
src/assets/images/example.png
Normal file
BIN
src/assets/images/example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
@@ -52,7 +52,7 @@
|
|||||||
:class="{ 'is-download': download }"
|
:class="{ 'is-download': download }"
|
||||||
v-if="props.showPrice && props.price"
|
v-if="props.showPrice && props.price"
|
||||||
>
|
>
|
||||||
{{ props.price }}
|
HK${{ props.price }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn" @click="addShopping">
|
<div class="btn" @click="addShopping">
|
||||||
@@ -89,16 +89,17 @@
|
|||||||
color: #232323;
|
color: #232323;
|
||||||
> .name {
|
> .name {
|
||||||
font-family: 'KaiseiOpti-Regular';
|
font-family: 'KaiseiOpti-Regular';
|
||||||
font-weight: 400;
|
font-weight: 700;
|
||||||
font-size: var(--commodity-name-fontSize, 1.6rem);
|
font-size: var(--commodity-name-fontSize, 2rem);
|
||||||
line-height: var(--commodity-name-lineHeight, 2.3rem);
|
line-height: var(--commodity-name-lineHeight, 2.3rem);
|
||||||
margin-bottom: var(--commodity-name-marginBottom, 0rem);
|
margin-bottom: var(--commodity-name-marginBottom, 0rem);
|
||||||
}
|
}
|
||||||
> .price {
|
> .price {
|
||||||
font-family: 'KaiseiOpti-Regular';
|
font-family: 'KaiseiOpti-Regular';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: var(--commodity-price-fontSize, 1.4rem);
|
font-size: var(--commodity-price-fontSize, 1.6rem);
|
||||||
line-height: var(--commodity-price-lineHeight, 2.3rem);
|
line-height: var(--commodity-price-lineHeight, 2.3rem);
|
||||||
|
margin-top: .8rem;
|
||||||
&.is-download {
|
&.is-download {
|
||||||
color: #979797;
|
color: #979797;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,14 +15,14 @@ const emit = defineEmits([
|
|||||||
])
|
])
|
||||||
const checkList = computed(()=>{
|
const checkList = computed(()=>{
|
||||||
if(props.selected[0] === 'all'){
|
if(props.selected[0] === 'all'){
|
||||||
return props.list.map(item => item.value)
|
return []
|
||||||
}else{
|
}else{
|
||||||
return [...props.selected]
|
return [...props.selected]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const handleChange = (val) => {
|
const handleChange = (val) => {
|
||||||
let data = val.filter(item => item !== 'all')
|
let data = val.filter(item => item !== 'all')
|
||||||
if(data.length == props.list.length){
|
if(data.length == props.list.length || data.length == 0){
|
||||||
data = ['all']
|
data = ['all']
|
||||||
}else{
|
}else{
|
||||||
data = [...val]
|
data = [...val]
|
||||||
@@ -31,18 +31,19 @@ const handleChange = (val) => {
|
|||||||
emit('change', data)
|
emit('change', data)
|
||||||
}
|
}
|
||||||
const checkAll = computed(()=>{
|
const checkAll = computed(()=>{
|
||||||
return checkList.value.length === props.list.length
|
return props.selected?.[0] == 'all'
|
||||||
})
|
})
|
||||||
const handleCheckAllChange = (val) => {
|
const handleCheckAllChange = (val) => {
|
||||||
let data = []
|
let data = []
|
||||||
if(val && props.selected[0] !== 'all'){
|
if(val && props.selected[0] !== 'all'){
|
||||||
data = ['all']
|
data = ['all']
|
||||||
// data = props.list.map(item => item.value)
|
// data = props.list.map(item => item.value)
|
||||||
|
emit('update:selected', data)
|
||||||
|
emit('change', data)
|
||||||
}else{
|
}else{
|
||||||
data = []
|
data = []
|
||||||
}
|
}
|
||||||
emit('update:selected', data)
|
|
||||||
emit('change', data)
|
|
||||||
}
|
}
|
||||||
let data = reactive({
|
let data = reactive({
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -188,6 +188,7 @@ const {} = toRefs(data);
|
|||||||
position: relative;
|
position: relative;
|
||||||
height: 34.4rem;
|
height: 34.4rem;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
|
flex-shrink: 0;
|
||||||
&.active{
|
&.active{
|
||||||
height: 14.7rem;
|
height: 14.7rem;
|
||||||
}
|
}
|
||||||
@@ -227,7 +228,7 @@ const {} = toRefs(data);
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
> .input{
|
> .input{
|
||||||
width: 66.6rem;
|
width: 66.6rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -286,14 +287,17 @@ const {} = toRefs(data);
|
|||||||
> .merchantList{
|
> .merchantList{
|
||||||
width: 121.8rem;
|
width: 121.8rem;
|
||||||
margin-top: 6rem;
|
margin-top: 6rem;
|
||||||
flex: 1;
|
// flex: 1;
|
||||||
overflow-y: auto;
|
// overflow-y: auto;
|
||||||
gap: 3.2rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
::-webkit-scrollbar{
|
::-webkit-scrollbar{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
:deep(.item){
|
||||||
|
margin-top: 2.1rem;
|
||||||
|
padding-bottom: 2.1rem;
|
||||||
|
}
|
||||||
.end{
|
.end{
|
||||||
font-family: 'KaiseiOpti-Regular';
|
font-family: 'KaiseiOpti-Regular';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@@ -78,8 +78,12 @@ defineExpose({})
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
.header-img{
|
.header-img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #232323;
|
||||||
>img{
|
>img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content{
|
.content{
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||||
import img from "@/assets/images/collectionStory/Rectangle.png";
|
import img from "@/assets/images/example.png";
|
||||||
import coreConcept from "./coreConcept.vue";
|
import coreConcept from "./coreConcept.vue";
|
||||||
import inspiration from "./inspiration.vue";
|
import inspiration from "./inspiration.vue";
|
||||||
import feelingWithAiDA from "./feelingWithAiDA.vue";
|
import feelingWithAiDA from "./feelingWithAiDA.vue";
|
||||||
@@ -14,19 +14,11 @@ const emit = defineEmits([
|
|||||||
let data = reactive({
|
let data = reactive({
|
||||||
})
|
})
|
||||||
const list = ref([
|
const list = ref([
|
||||||
{
|
// {
|
||||||
url: img,
|
// url: img,
|
||||||
title: "Windswept Burden",
|
// title: "Item sold here",
|
||||||
price: "$100.00",
|
// price: "$?",
|
||||||
},{
|
// },
|
||||||
url: img,
|
|
||||||
title: "Windswept Burden",
|
|
||||||
price: "$100.00",
|
|
||||||
},{
|
|
||||||
url: img,
|
|
||||||
title: "Windswept Burden",
|
|
||||||
price: "$100.00",
|
|
||||||
},
|
|
||||||
])
|
])
|
||||||
const addShopping = (item) => {
|
const addShopping = (item) => {
|
||||||
emit('addShopping', item)
|
emit('addShopping', item)
|
||||||
@@ -47,9 +39,9 @@ const {} = toRefs(data);
|
|||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="personal">
|
<div class="personal">
|
||||||
<img src="@/assets/images/collectionStory/code-create.png" alt="">
|
<img src="@/assets/images/collectionStory/code-create.png" alt="">
|
||||||
<div class="name">
|
<div class="name" @click="openCodeCreate">
|
||||||
<span>Code-Create</span>
|
<span>Code-Create</span>
|
||||||
<div class="icon" @click="openCodeCreate">
|
<div class="icon">
|
||||||
<SvgIcon name="share" size="24" />
|
<SvgIcon name="share" size="24" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -100,8 +92,8 @@ const {} = toRefs(data);
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: .4rem;
|
gap: .4rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> .icon{
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
> .icon{
|
||||||
}
|
}
|
||||||
> span{
|
> span{
|
||||||
font-family: 'KaiseiOpti-Bold';
|
font-family: 'KaiseiOpti-Bold';
|
||||||
|
|||||||
@@ -22,10 +22,10 @@ const {} = toRefs(data);
|
|||||||
<div class="collectionStory">
|
<div class="collectionStory">
|
||||||
<div class="first-screen">
|
<div class="first-screen">
|
||||||
<img class="banner" src="@/assets/images/collectionStory/collection_story_banner.png" alt="">
|
<img class="banner" src="@/assets/images/collectionStory/collection_story_banner.png" alt="">
|
||||||
<div class="back">
|
<!-- <div class="back">
|
||||||
<SvgIcon name="collectionStory-back" size="20" />
|
<SvgIcon name="collectionStory-back" size="20" />
|
||||||
<div class="text">{{ $t('collectionStory.back') }}</div>
|
<div class="text">{{ $t('collectionStory.back') }}</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="title-content">
|
<div class="title-content">
|
||||||
<div class="title-box">
|
<div class="title-box">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
@@ -59,6 +59,7 @@ const {} = toRefs(data);
|
|||||||
height: auto;
|
height: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
align-items: center;
|
||||||
> .back{
|
> .back{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2.4rem;
|
top: 2.4rem;
|
||||||
@@ -78,7 +79,7 @@ const {} = toRefs(data);
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 0 6.7rem;
|
padding: 0 6.7rem;
|
||||||
margin-top: 11.5rem;
|
// margin-top: 11.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -87,7 +88,7 @@ const {} = toRefs(data);
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
> .title{
|
> .title{
|
||||||
font-size: 6.5rem;
|
font-size: 6.5rem;
|
||||||
line-height: 100%;
|
line-height: 1.3;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #585858;
|
color: #585858;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -177,12 +177,13 @@ defineExpose({})
|
|||||||
--el-border-radius-base: 0;
|
--el-border-radius-base: 0;
|
||||||
--el-select-input-color: rgba(0, 0, 0, 0.5);
|
--el-select-input-color: rgba(0, 0, 0, 0.5);
|
||||||
--el-select-input-font-size: 1rem;
|
--el-select-input-font-size: 1rem;
|
||||||
|
--el-border-color: #222222;
|
||||||
.el-select__wrapper {
|
.el-select__wrapper {
|
||||||
font-size: 1.07rem;
|
font-size: 1.07rem;
|
||||||
padding: 0 0.7rem;
|
padding: 0 0.7rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
height: 2.2rem;
|
height: 2.8rem;
|
||||||
|
|
||||||
.header-label {
|
.header-label {
|
||||||
font-family: KaiseiOpti-Regular;
|
font-family: KaiseiOpti-Regular;
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ const categories = ref(['all'])
|
|||||||
const gender = ref(['all'])
|
const gender = ref(['all'])
|
||||||
|
|
||||||
const clearFilters = () => {
|
const clearFilters = () => {
|
||||||
|
if(categories.value?.[0] == 'all' && gender.value?.[0] == 'all')return
|
||||||
categories.value = ['all']
|
categories.value = ['all']
|
||||||
gender.value = ['all']
|
gender.value = ['all']
|
||||||
handleChange()
|
handleChange()
|
||||||
|
|||||||
Reference in New Issue
Block a user