fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by zhangwenxue
Commit 99f52e5af06d042e5539a659d7bc84487fe05fe7 1 parent acbd4c8d

feat: adjust UI

Inline Side-by-side
Showing 2 changed files with 108 additions and 76 deletions
... ... @@ -6,8 +6,8 @@
</div>
<div class="product-item" v-for="(product, idx) in list" :key="idx" @click="onItemClick(product)">
<square-img :src="product.default_images" :width="300" :height="300" />
<div class="name">{{product.product_name}}</div>
<div class="price">¥{{product.price}}</div>
<div class="name"><span>{{product.product_name}}</span></div>
<div class="price"><i>¥</i>{{product.price}}</div>
</div>
</div>
</template>
... ... @@ -38,21 +38,27 @@ export default {
</script>
<style lang="scss" scoped>
@import "../product-detail";
@import "../product-detail";
.associated-products {
display: flex;
flex-flow: wrap;
justify-content: space-between;
margin-top: 30px;
display: flex;
flex-flow: wrap;
justify-content: space-between;
.header {
padding: 20px 0;
display: flex;
justify-content: space-between;
width: 100%;
font-size: 28px;
font-size: 24px;
color: #999;
line-height: 50px;
}
.title {
font-size: 36px;
color: #000;
}
.product-item {
... ... @@ -63,14 +69,32 @@ export default {
}
.name {
white-space: nowrap;
overflow: hidden;
display: inline-block;
max-width: 100%;
height: 64px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
span {
display: block;
font-size: 20px;
line-height: 32px;
max-height: 64px;
word-break: break-all;
overflow: hidden;
}
}
.price {
font-weight: bold;
font-size: 24px;
color: #d0021b;
i {
font-style: normal;
font-size: 0.9em;
vertical-align: baseline;
}
}
}
</style>
... ...
<template>
<div class="layout">
<LayoutHeader class="layout-header" :show-back="true">
<template>
<transition name="fade">
<img-size v-show="headThumbnailVisible" class="title-thumbnail" :src="imageList && imageList[0] && imageList[0].image_url" :width="300" :height="300"/>
</transition>
</template>
<template #opts>
<cube-button class="icon-fav" :light="true" v-if="productDetail.isFav" @click="_toggleFav(false)">
<svg id="icon-heart" style="width: 1rem; height: 1rem;" viewBox="0 0 28 28">
<title>heart</title>
<path d="M14 26c-0.25 0-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313 0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281z"></path>
</svg>
</cube-button>
<cube-button class="icon-fav" :light="true" v-else @click="_toggleFav(true)">
<svg id="icon-heart-o" style="width: 1rem; height: 1rem;" viewBox="0 0 28 28">
<title>heart-o</title>
<path d="M26 9.312c0-4.391-2.969-5.313-5.469-5.313-2.328 0-4.953 2.516-5.766 3.484-0.375 0.453-1.156 0.453-1.531 0-0.812-0.969-3.437-3.484-5.766-3.484-2.5 0-5.469 0.922-5.469 5.313 0 2.859 2.891 5.516 2.922 5.547l9.078 8.75 9.063-8.734c0.047-0.047 2.938-2.703 2.938-5.563zM28 9.312c0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281s-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313z"></path>
</svg>
</cube-button>
</template>
<transition name="fade">
<img-size v-show="headThumbnailVisible" class="title-thumbnail" :src="imageList && imageList[0] && imageList[0].image_url" :width="300" :height="300"/>
</transition>
</LayoutHeader>
<div class="layout-context fixscroll">
<cube-scroll
... ... @@ -43,9 +26,11 @@
<div class="info">
<div class="info-price">¥{{productDetail.least_price||''}}</div>
<div class="info-name">{{productDetail.product_name}}</div>
</div>
<a class="banner" v-if="resource" :href="resource.url">
<img-size :src="sizeImg(resource.src)" :width="300" :height="60"/>
</a>
<div class="info">
<div class="info-list">
<div class="info-list-item" v-if="activity && activity.length !== 0" @click="showActivity">
<div class="info-list-name">促销</div>
... ... @@ -71,8 +56,23 @@
</cube-scroll>
</div>
<div class="footer">
<div class="heart">
<div class="icon-fav" v-if="productDetail.isFav" @click="_toggleFav(false)">
<svg id="icon-heart" style="width: 1rem; height: 1rem;" viewBox="0 0 28 28">
<title>heart</title>
<path d="M14 26c-0.25 0-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313 0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281z"></path>
</svg>
</div>
<div class="icon-fav" v-else @click="_toggleFav(true)">
<svg id="icon-heart-o" style="width: 1rem; height: 1rem;" viewBox="0 0 28 28">
<title>heart-o</title>
<path d="M26 9.312c0-4.391-2.969-5.313-5.469-5.313-2.328 0-4.953 2.516-5.766 3.484-0.375 0.453-1.156 0.453-1.531 0-0.812-0.969-3.437-3.484-5.766-3.484-2.5 0-5.469 0.922-5.469 5.313 0 2.859 2.891 5.516 2.922 5.547l9.078 8.75 9.063-8.734c0.047-0.047 2.938-2.703 2.938-5.563zM28 9.312c0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281s-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313z"></path>
</svg>
</div>
收藏
</div>
<cube-button class="sell" @click="sell">出售</cube-button>
<cube-button class="buy" @click="buy">购买 <span>¥{{ productDetail.least_price || '-' }}</span></cube-button>
<cube-button class="buy active" @click="buy">购买</cube-button>
</div>
<activity-list-sheet v-if="showActivitySheet" :list="activity" @hidden="onActivitySheetHidden"/>
<size-select-sheet v-if="showSizeSelectSheet"
... ... @@ -334,6 +334,7 @@ export default {
margin: 0 auto;
}
}
.banner {
padding: 20px 0 0;
display: block;
... ... @@ -372,17 +373,26 @@ export default {
}
.info {
padding: 0 40px;
padding: 14px 40px;
&-price {
color: #08304b;
font-size: 40px;
color: #d0021b;
font-size: 48px;
font-weight: bold;
text-align: center;
i {
font-style: normal;
font-size: 36px;
vertical-align: text-bottom;
}
}
&-name {
font-size: 30px;
line-height: 1.4;
font-size: 28px;
color: #999;
text-align: center;
line-height: 32px;
}
&-list {
... ... @@ -393,34 +403,43 @@ export default {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: 0;
}
font-size: 28px;
box-sizing: border-box;
}
&-name {
/* font-family: PingFang-SC-Regular; */
font-size: 28px;
color: #999;
letter-spacing: 0;
}
&-value {
/* font-family: SFProText-Medium; */
font-size: 28px;
color: #000;
letter-spacing: 0;
text-align: right;
font-weight: bold;
}
}
.ref-img {
margin-top: 40px;
}
}
.ref-img {
width: 100%;
}
.recommend {
margin-top: 20px;
h2 {
font-size: 36px;
line-height: 50px;
padding: 20px 0;
margin: 0 40px;
}
}
.title-thumbnail {
height: 100%;
}
... ... @@ -428,42 +447,31 @@ export default {
.footer {
display: flex;
text-align: center;
padding: 16px 30px;
.sell,
.buy {
flex-basis: auto;
border-top: 1px solid $primary-color;
line-height: 60px;
font-size: 28px;
}
@include cube-ufo-btn;
.sell {
flex: 1;
color: $primary-color;
background: #fff;
.heart {
margin-right: auto;
text-align: center;
width: 3em;
color: #888;
font-size: 22px;
line-height: 32px;
svg {
width: 48px;
height: 48px;
color: #888;
fill: currentColor;
stroke: currentColor;
}
}
.sell,
.buy {
border-left: 1px solid $primary-color;
color: #fff;
flex: 2;
background-color: $primary-color;
span {
color: $sub-color;
}
flex: 0 0 6em;
}
}
.associated-products {
margin: 40px 0;
}
.recommend {
h2 {
font-size: 40px;
line-height: 56px;
padding: 32px 0;
text-align: center;
}
}
</style>
... ...