Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 7389753f by hanjixin
Options

竖版页面编写

parent 86deb42a
Showing with 61 additions and 81 deletions
src/templates/listingInformation/pages/rentHouse2.vue
......@@ -5,14 +5,15 @@
<div class="title">{{getValue('companyName')}}</div>-->
<div class="decoration"></div>
<div class="house-list">
<swiper :options="swiperOption" ref="mySwiper" style=" width:672px;
<swiper :options="swiperOption"
ref="mySwiper"
style=" width:672px;
height:912px;">
<swiper-slide
style="transform: translate3d(0,0,0)"
v-for="(item, index) in dataList"
:key="index"
>
<img :src="item" alt />
<swiper-slide style="transform: translate3d(0,0,0)"
v-for="(item, index) in dataList"
:key="index">
<img :src="item"
alt />
</swiper-slide>
</swiper>
</div>
......@@ -25,59 +26,52 @@ height:912px;">
<span class="uint">/月</span>
<div class="mirror-light"></div>
</div>
<div class="surrounding" zh="周边设施">SURROUNDING FACILITIES</div>
<div class="surrounding"
zh="周边设施">SURROUNDING FACILITIES</div>
<div class="feature-list">
<div class="feature-item">
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
alt
/>
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
alt />
地铁四号线枣园站 260米
</div>
<div class="feature-item feature-item-right">
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
alt
/>
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
alt />
地铁四号线枣园站 260米
</div>
<div class="feature-item">
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
alt
/>
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
alt />
地铁四号线枣园站 260米
</div>
<div class="feature-item feature-item-right">
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
alt
/>
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
alt />
地铁四号线枣园站 260米
</div>
</div>
</div>
</div>
<div class="high-light">
<div class="high-light-item">
<div class="high-light-item-top">20m²</div>
<div class="high-light-item-bottom">面积</div>
</div>
<div class="high-light-item">
<div class="high-light-item-top">阳台</div>
<div class="high-light-item-bottom">面积</div>
</div>
<div class="high-light-item">
<div class="high-light-item-top">3/10</div>
<div class="high-light-item-bottom">楼层</div>
</div>
</div>
<div class="high-light-item">
<div class="high-light-item-top">20m²</div>
<div class="high-light-item-bottom">面积</div>
</div>
<div class="high-light-item">
<div class="high-light-item-top">阳台</div>
<div class="high-light-item-bottom">面积</div>
</div>
<div class="high-light-item">
<div class="high-light-item-top">3/10</div>
<div class="high-light-item-bottom">楼层</div>
</div>
</div>
</div>
</template>
......@@ -196,9 +190,14 @@ export default {
width: 672px;
height: 912px;
box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
line-height: 912px;
img {
vertical-align: middle;
// margin-top: 50%;
border-radius: 5px;
height: 100%;
max-height: 100%;
max-width: 100%;
margin: auto;
}
}
.right-container {
......@@ -214,7 +213,7 @@ export default {
}
.title {
font-size: 67px;
line-height: 80px;
line-height: 87px;
color: #333;
font-weight: bold;
}
......@@ -264,7 +263,7 @@ export default {
overflow: hidden;
}
margin-bottom: 80px;
margin-top: 40px;
margin-top: 50px;
}
.surrounding {
position: relative;
......@@ -285,12 +284,12 @@ export default {
}
}
.feature-list {
margin-top: 22px;
margin-top: 23px;
overflow: hidden;
border-top: 1px solid #e6e6e6;
padding-top: 35px;
.feature-item {
margin-bottom: 45px;
margin-bottom: 47px;
display: flex;
// float: left;
// width: 318px;
......@@ -315,58 +314,39 @@ export default {
// width: 577px;
// -webkit-filter: contrast(20);
// display: flex;
right: 95px;
top: 394px;
right: 95px;
top: 346px;
border: 1px solid #e6e6e6;
border-left: none;
border-right: none;
box-sizing: border-box;
padding: 22px 51px;
justify-content: space-between;
// background: black;
.high-light-item {
box-sizing: border-box;
padding-top: 25px;
position: relative;
background: rgba(229, 59, 81, 1);
// background: rgba(229, 59, 81, 1);
// opacity:0.2;
text-align: center;
border-radius: 50%;
width: 114px;
height: 114px;
z-index: 2;
&::after {
content: "";
background: rgba(229, 59, 81, 1);
opacity: 0.5;
// -webkit-filter: blur(20px);
left: -4px;
top: -4px;
position: absolute;
z-index: -1;
text-align: center;
border-radius: 50%;
width: 122px;
height: 122px;
animation: move 12s infinite alternate ease-in-out;
}
&:nth-child(2)::after {
animation-duration: 14.7s;
animation-delay: -2.7s;
}
&:nth-child(3)::after {
animation-duration: 8.7s;
animation-delay: -5.32s;
}
margin-bottom: 112px;
width: 195px;
height: 121px;
border: 1px solid rgba(0, 0, 0, 0.3);
// opacity:0.3;
border-radius: 60px;
z-index: 2;
.high-light-item-top {
font-size: 29px;
font-size: 36px;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(255, 255, 255, 1);
color: #666666;
}
.high-light-item-bottom {
font-size: 15px;
font-size: 18px;
font-weight: 300;
color: #999999;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment