|
|
@@ -4,6 +4,9 @@
|
|
|
<div class="search">
|
|
|
<van-search v-model="searchValue" @search="onSearch" shape="round" :placeholder="$t('home.searchPlaceholder')" />
|
|
|
</div>
|
|
|
+ <div class="topbanner">
|
|
|
+ <img src="../../../public/static/images/topba.jpg">
|
|
|
+ </div>
|
|
|
<div class="excellent">
|
|
|
<div class="title">
|
|
|
<div class="left">{{$t('home.preferredZone')}}</div>
|
|
|
@@ -54,23 +57,26 @@
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<div class="rankBox">
|
|
|
- <div class="cell" v-for="item,index in rankList" :key="index" @click="getCommodity(item)">
|
|
|
- <div class="left">
|
|
|
- <div class="tagBox">
|
|
|
- <span>{{index+1}}</span>
|
|
|
- </div>
|
|
|
- <img :src="requestUrl+item.faceImg" alt="" srcset="">
|
|
|
+ <div class="rankitem" v-for="item,index in rankList" :key="index" @click="getCommodity(item)">
|
|
|
+ <div class="tagBox">
|
|
|
+ <span>{{index+1}}</span>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <div>
|
|
|
- <div class="center">
|
|
|
- <span>{{item.commodityName}}</span>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <span>¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
|
|
|
+ <div class="ranktit center">
|
|
|
+ <span>{{item.commodityName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="cell">
|
|
|
+ <div class="left">
|
|
|
+
|
|
|
+ <img :src="requestUrl+item.faceImg" alt="" srcset="">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div>
|
|
|
+ <div class="right">
|
|
|
+ <span>¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div>{{item.fwb}}</div>
|
|
|
</div>
|
|
|
- <div>{{item.fwb}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -307,6 +313,8 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
#home {
|
|
|
background: #f6f6f6;
|
|
|
+ height:100%;
|
|
|
+ overflow-x:hidden;
|
|
|
.excellent {
|
|
|
width: 100%;
|
|
|
padding: 0.12rem /* 12/100 */;
|
|
|
@@ -342,6 +350,7 @@ export default {
|
|
|
.right .van-icon{
|
|
|
font-size: 14px ;
|
|
|
color: #878787;
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.content {
|
|
|
@@ -350,7 +359,7 @@ export default {
|
|
|
font-size: 0.14rem /* 14/100 */;
|
|
|
padding: 0.1rem /* 10/100 */ 0;
|
|
|
.cell {
|
|
|
- width: 30%;
|
|
|
+ width: 47%;
|
|
|
margin-left: 3%;
|
|
|
// height: 1.5rem /* 124/100 */;
|
|
|
overflow: hidden;
|
|
|
@@ -364,7 +373,7 @@ export default {
|
|
|
> div:nth-child(2) {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
- font-size: 1vw;
|
|
|
+ font-size: 0.14rem;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
// border: 1px solid red;
|
|
|
@@ -413,7 +422,7 @@ export default {
|
|
|
padding: 0.05rem /* 15/100 */;
|
|
|
font-size: 0.14rem /* 15/100 */;
|
|
|
.cell {
|
|
|
- width: 48%;
|
|
|
+ width: 31%;
|
|
|
height: 1.2rem /* 120/100 */;
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
@@ -462,7 +471,7 @@ export default {
|
|
|
width: 100%;
|
|
|
padding: 0 0.12rem 0.12rem 0.12rem /* 12/100 */;
|
|
|
box-sizing: border-box;
|
|
|
- background-color:#fff;
|
|
|
+ background-color:#f6f6f6;
|
|
|
padding:.06667rem 0;
|
|
|
margin-bottom:.10667rem;
|
|
|
.title {
|
|
|
@@ -472,6 +481,7 @@ export default {
|
|
|
padding: 0.05rem /* 10/100 */ 0;
|
|
|
margin-bottom: 0.1rem /* 12/100 */;
|
|
|
width: 100%;
|
|
|
+
|
|
|
.left {
|
|
|
font-size: 0.16rem /* 16/100 */;
|
|
|
color: #333333;
|
|
|
@@ -493,56 +503,78 @@ export default {
|
|
|
.content {
|
|
|
display: flex;
|
|
|
.rankBox {
|
|
|
- padding: 0.05rem /* 5/100 */ 0 /* 15/100 */;
|
|
|
+ padding: 0.05rem 0.1rem /* 5/100 */ 0 /* 15/100 */;
|
|
|
+
|
|
|
+ .rankitem{
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0px 0px 5px #e9e9e9;
|
|
|
+ padding:15px 0;
|
|
|
+ position:relative;
|
|
|
+ margin-bottom: 0.1rem;
|
|
|
+ .tagBox {
|
|
|
+ width: .2533rem;
|
|
|
+ height: .3133rem;
|
|
|
+ line-height: .2133rem;
|
|
|
+ /*background: url("../../../public/static/images/tagBg.png");*/
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 0.16rem /* 16/100 */;
|
|
|
+ text-align: left;
|
|
|
+ font-weight:600;
|
|
|
+ background-color:#38d0c9;
|
|
|
+ border-color:#38d0c9;
|
|
|
+ border-bottom-right-radius:.14667rem;
|
|
|
+
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-top: 0rem /* 5/100 */;
|
|
|
+ margin-left: .08rem /* 5/100 */;
|
|
|
+ display: inline-block;
|
|
|
+ font-family:PingFangSC-Regular;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ranktit {
|
|
|
+ font-size: 0.15rem /* 13/100 */;
|
|
|
+ color: #2c2c2c;
|
|
|
+ width:100%;
|
|
|
+ font-weight:600;
|
|
|
+ padding-left:0.4533rem;
|
|
|
+ text-align:left;
|
|
|
+ }
|
|
|
.cell {
|
|
|
width: 100%;
|
|
|
height: 1.39rem /* 139/100 */;
|
|
|
+
|
|
|
display: flex;
|
|
|
padding: 0.12rem /* 12/100 */;
|
|
|
margin-bottom: 0.15rem /* 15/100 */;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 0.05rem /* 5/100 */;
|
|
|
color: #333333;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0px 0px 5px #e9e9e9;
|
|
|
+
|
|
|
+
|
|
|
.left {
|
|
|
width: 38%;
|
|
|
- border-radius: 5px;
|
|
|
+ border-radius: 15px;
|
|
|
overflow: hidden;
|
|
|
- position: relative;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ border: 1px #f7f5ee solid;
|
|
|
+
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
- .tagBox {
|
|
|
- width: .3533rem;
|
|
|
- height: .2133rem;
|
|
|
- line-height: .2133rem;
|
|
|
- /*background: url("../../../public/static/images/tagBg.png");*/
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 1;
|
|
|
- font-size: 0.16rem /* 16/100 */;
|
|
|
- text-align: left;
|
|
|
- font-weight:600;
|
|
|
- background-color:#38d0c9;
|
|
|
- border-color:#38d0c9;
|
|
|
- border-bottom-right-radius:.14667rem;
|
|
|
|
|
|
-
|
|
|
- span {
|
|
|
- margin-top: 0rem /* 5/100 */;
|
|
|
- margin-left: .08rem /* 5/100 */;
|
|
|
- display: inline-block;
|
|
|
- font-family:PingFangSC-Regular;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.right {
|
|
|
padding-top: 0.03rem /* 3/100 */;
|
|
|
+ padding-left: 0.09rem;
|
|
|
width: 72%;
|
|
|
font-size: 0.14rem /* 15/100 */;
|
|
|
display: flex;
|
|
|
@@ -553,17 +585,21 @@ export default {
|
|
|
// height: 0.63rem;
|
|
|
max-height: 0.63rem;
|
|
|
display: flex;
|
|
|
- padding: 0 0 0 0.12rem;
|
|
|
+ padding: 0 0 .12rem 0rem;
|
|
|
font-weight: bold;
|
|
|
box-sizing: border-box;
|
|
|
+ border-bottom:1px #f7f5ee solid;
|
|
|
> div:nth-child(1) {
|
|
|
text-align: justify;
|
|
|
/*color: #38d0c9;*/
|
|
|
width: 55%;
|
|
|
+ width:100%;
|
|
|
overflow: hidden;
|
|
|
display: -webkit-box; /*盒子模型微弹性伸缩模型*/
|
|
|
-webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
|
|
|
-webkit-line-clamp: 3; /*文本显示3行*/
|
|
|
+ color:#bb271a;
|
|
|
+ font-size:0.23rem;
|
|
|
}
|
|
|
> div:nth-child(2) {
|
|
|
color: #e94225;
|
|
|
@@ -580,6 +616,7 @@ export default {
|
|
|
// height: 35%;
|
|
|
text-align: left;
|
|
|
padding: 0 0 0 0.12rem;
|
|
|
+ padding:0;
|
|
|
color: #999999;
|
|
|
box-sizing: border-box;
|
|
|
overflow: hidden; /*文本超出隐藏*/
|
|
|
@@ -608,12 +645,16 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
.logotop{
|
|
|
-position:absolute;
|
|
|
-top: 5px;
|
|
|
-left:35%;
|
|
|
-justify-content:center;
|
|
|
-z-index:99999;
|
|
|
+ position:absolute;
|
|
|
+ top: 5px;
|
|
|
+ left:35%;
|
|
|
+ justify-content:center;
|
|
|
+ z-index:99999;
|
|
|
|
|
|
-background-color:#fff;
|
|
|
+ background-color:#fff;
|
|
|
+}
|
|
|
+.topbanner img{
|
|
|
+ width:100%;
|
|
|
+ display:block;
|
|
|
}
|
|
|
</style>
|
liu
