146 lines
3.4 KiB
Vue
146 lines
3.4 KiB
Vue
<!-- 1.品牌展示 -->
|
||
<template>
|
||
<view class="content">
|
||
<div class="top">
|
||
<swiper class="swiper" circular :interval="2000" :duration="500" :indicatorDots="true">
|
||
<swiper-item>
|
||
<div class="top-content">
|
||
<div class="top-left">
|
||
<div class="top-left-title">
|
||
朗诗地产 科技人居引领者
|
||
</div>
|
||
<div class="top-left-content">
|
||
<div class="top-left-content-top">
|
||
朗诗创立于2001年，是国内领先的绿色开发服务商和生活运营商，以绿色思维，践行“人本、阳光、绿色”的价值观，引领绿色生活。业务范围覆盖北京、上海、苏州、广州、深圳、天津、重庆、南京、杭州、武汉、成都、西安等中国主要经济区域。
|
||
</div>
|
||
<ul class="top-left-content-list">
|
||
<li>深耕20余载</li>
|
||
<li>连续10年入选中国地产百强</li>
|
||
<li>132个绿色科技地产项目</li>
|
||
<li>开发总面积逾2300万平方米</li>
|
||
<li>50万业主</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="top-right" />
|
||
</div>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<div class="top-content">
|
||
<div class="top-left">
|
||
<div class="top-left-title">
|
||
金厦房产 四十余载与港城共美好
|
||
</div>
|
||
<div class="top-left-content">
|
||
<div class="top-left-content-top">
|
||
金厦房产隶属张家港市城市投资发展集团有限公司，是张家港市国有全资房地产开发企业，具有国家一级房地产开发资质，开发面积超500万平方米。
|
||
</div>
|
||
<ul class="top-left-content-list">
|
||
<li>阳光怡庭-城市半岛墅居，詹天佑奖优秀住宅小区金奖</li>
|
||
<li>阳光锦程-筑园为家，超大中央水景园境</li>
|
||
<li>阳光春晓-双滨河水系，领秀时代的倾心筑作</li>
|
||
<li>阳光半岛酒店-藏在1200亩森林氧吧里的园林度假酒店</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="top-right" />
|
||
</div>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
</div>
|
||
<div class="bottom">
|
||
<Menu :type="1" />
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import Menu from '../../components/Menu.vue'
|
||
|
||
const opt = {
|
||
background: ['color1', 'color2', 'color3'],
|
||
indicatorDots: false,
|
||
autoplay: true,
|
||
interval: 2000,
|
||
duration: 500
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.swiper {
|
||
height: 100%;
|
||
}
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.top {
|
||
flex: 12;
|
||
}
|
||
|
||
.bottom {
|
||
flex: 1;
|
||
background-color: rgba(44 61, 43, 1);
|
||
}
|
||
|
||
.top-content {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.top-left {
|
||
flex: 1;
|
||
padding: 30rpx 10rpx 10rpx 10rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
}
|
||
|
||
.top-right {
|
||
flex: 1;
|
||
background: url('~@/static/tworight.jpg') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.top-left-title {
|
||
position: relative;
|
||
font-weight: bold;
|
||
padding-left: 10rpx;
|
||
font-size: 18rpx;
|
||
color: #219862;
|
||
|
||
}
|
||
|
||
.top-left-title:before {
|
||
content: "";
|
||
background-color: #219862;
|
||
width: 4rpx;
|
||
height: 20rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
margin-top: -9rpx;
|
||
-webkit-border-radius: 3rpx;
|
||
-moz-border-radius: 3rpx;
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
.top-left-content {
|
||
padding: 10rpx;
|
||
font-size: 15rpx;
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
line-height: 2;
|
||
}
|
||
|
||
.top-left-content-top {
|
||
text-indent: 2em;
|
||
}
|
||
</style> |