Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 7389753f by hanjixin
Options

竖版页面编写

parent 86deb42a
Showing with 39 additions and 59 deletions
src/templates/listingInformation/pages/rentHouse2.vue
...@@ -5,14 +5,15 @@ ...@@ -5,14 +5,15 @@
<div class="title">{{getValue('companyName')}}</div>--> <div class="title">{{getValue('companyName')}}</div>-->
<div class="decoration"></div> <div class="decoration"></div>
<div class="house-list"> <div class="house-list">
<swiper :options="swiperOption" ref="mySwiper" style=" width:672px; <swiper :options="swiperOption"
ref="mySwiper"
style=" width:672px;
height:912px;"> height:912px;">
<swiper-slide <swiper-slide style="transform: translate3d(0,0,0)"
style="transform: translate3d(0,0,0)"
v-for="(item, index) in dataList" v-for="(item, index) in dataList"
:key="index" :key="index">
> <img :src="item"
<img :src="item" alt /> alt />
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
...@@ -26,38 +27,31 @@ height:912px;"> ...@@ -26,38 +27,31 @@ height:912px;">
<div class="mirror-light"></div> <div class="mirror-light"></div>
</div> </div>
<div class="surrounding" zh="周边设施">SURROUNDING FACILITIES</div> <div class="surrounding"
zh="周边设施">SURROUNDING FACILITIES</div>
<div class="feature-list"> <div class="feature-list">
<div class="feature-item"> <div class="feature-item">
<img <img class="icon"
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png" src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
alt alt />
/>
地铁四号线枣园站 260米 地铁四号线枣园站 260米
</div> </div>
<div class="feature-item feature-item-right"> <div class="feature-item feature-item-right">
<img <img class="icon"
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png" src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
alt alt />
/>
地铁四号线枣园站 260米 地铁四号线枣园站 260米
</div> </div>
<div class="feature-item"> <div class="feature-item">
<img <img class="icon"
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png" src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
alt alt />
/>
地铁四号线枣园站 260米 地铁四号线枣园站 260米
</div> </div>
<div class="feature-item feature-item-right"> <div class="feature-item feature-item-right">
<img <img class="icon"
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png" src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
alt alt />
/>
地铁四号线枣园站 260米 地铁四号线枣园站 260米
</div> </div>
</div> </div>
...@@ -196,9 +190,14 @@ export default { ...@@ -196,9 +190,14 @@ export default {
width: 672px; width: 672px;
height: 912px; height: 912px;
box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px; box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px;
line-height: 912px;
img { img {
vertical-align: middle;
// margin-top: 50%;
border-radius: 5px; border-radius: 5px;
height: 100%; max-height: 100%;
max-width: 100%;
margin: auto;
} }
} }
.right-container { .right-container {
...@@ -214,7 +213,7 @@ export default { ...@@ -214,7 +213,7 @@ export default {
} }
.title { .title {
font-size: 67px; font-size: 67px;
line-height: 80px; line-height: 87px;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
...@@ -264,7 +263,7 @@ export default { ...@@ -264,7 +263,7 @@ export default {
overflow: hidden; overflow: hidden;
} }
margin-bottom: 80px; margin-bottom: 80px;
margin-top: 40px; margin-top: 50px;
} }
.surrounding { .surrounding {
position: relative; position: relative;
...@@ -285,12 +284,12 @@ export default { ...@@ -285,12 +284,12 @@ export default {
} }
} }
.feature-list { .feature-list {
margin-top: 22px; margin-top: 23px;
overflow: hidden; overflow: hidden;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
padding-top: 35px; padding-top: 35px;
.feature-item { .feature-item {
margin-bottom: 45px; margin-bottom: 47px;
display: flex; display: flex;
// float: left; // float: left;
// width: 318px; // width: 318px;
...@@ -316,57 +315,38 @@ export default { ...@@ -316,57 +315,38 @@ export default {
// -webkit-filter: contrast(20); // -webkit-filter: contrast(20);
// display: flex; // display: flex;
right: 95px; right: 95px;
top: 394px; top: 346px;
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
border-left: none; border-left: none;
border-right: none; border-right: none;
box-sizing: border-box; box-sizing: border-box;
padding: 22px 51px;
justify-content: space-between; justify-content: space-between;
// background: black; // background: black;
.high-light-item { .high-light-item {
box-sizing: border-box; box-sizing: border-box;
padding-top: 25px; padding-top: 25px;
position: relative; position: relative;
background: rgba(229, 59, 81, 1); // background: rgba(229, 59, 81, 1);
// opacity:0.2; // opacity:0.2;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
width: 114px; margin-bottom: 112px;
height: 114px; width: 195px;
height: 121px;
border: 1px solid rgba(0, 0, 0, 0.3);
// opacity:0.3;
border-radius: 60px;
z-index: 2; 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;
}
.high-light-item-top { .high-light-item-top {
font-size: 29px; font-size: 36px;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-weight: 600; font-weight: 600;
color: rgba(255, 255, 255, 1); color: #666666;
} }
.high-light-item-bottom { .high-light-item-bottom {
font-size: 15px; font-size: 18px;
font-weight: 300; 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