|
@@ -5,45 +5,50 @@
|
|
<text class="label">项目名称</text>
|
|
<text class="label">项目名称</text>
|
|
<uni-icons class="project-icon" type="right" size="16"></uni-icons>
|
|
<uni-icons class="project-icon" type="right" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="change-role">
|
|
|
|
+ <uni-icons type="contact" size="14" class="role-icon"></uni-icons>切换角色
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
<view class="banner-box">
|
|
<view class="banner-box">
|
|
- <uni-swiper-dot :info="info" mode="round">
|
|
|
|
- <swiper class="swiper-box">
|
|
|
|
- <swiper-item class="swiper-item-box" v-for="(item, index) in info" :key="index">
|
|
|
|
- <view class="swiper-item" :style="'background-image:url('+item.url+')'"></view>
|
|
|
|
- </swiper-item>
|
|
|
|
- </swiper>
|
|
|
|
- </uni-swiper-dot>
|
|
|
|
|
|
+ <swiper class="swiper-box">
|
|
|
|
+ <swiper-item class="swiper-item-box" v-for="(item, index) in info" :key="index">
|
|
|
|
+ <view class="swiper-item" :style="'background-image:url(' + item.url + ')'"></view>
|
|
|
|
+ </swiper-item>
|
|
|
|
+ </swiper>
|
|
</view>
|
|
</view>
|
|
<view class="grid">
|
|
<view class="grid">
|
|
<view class="grid-item red">
|
|
<view class="grid-item red">
|
|
<view>
|
|
<view>
|
|
<view class="label">房源列表</view>
|
|
<view class="label">房源列表</view>
|
|
- <view class="sub-label">查看房源
|
|
|
|
- <uni-icons class="sub-label-icon" type="right" size="14" color="#eee"></uni-icons>
|
|
|
|
|
|
+ <view class="sub-label">
|
|
|
|
+ 查看房源
|
|
|
|
+ <uni-icons class="sub-label-icon" type="right" size="14"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <uni-icons class="home-filled" type="home-filled" size="40" color="#eee"></uni-icons>
|
|
|
|
|
|
+ <uni-icons class="home-filled" type="home-filled" size="40"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="grid-item blue">
|
|
<view class="grid-item blue">
|
|
<view>
|
|
<view>
|
|
<view class="label">客户管理</view>
|
|
<view class="label">客户管理</view>
|
|
- <view class="sub-label">查看客户
|
|
|
|
- <uni-icons class="sub-label-icon" type="right" size="14" color="#eee"></uni-icons>
|
|
|
|
|
|
+ <view class="sub-label">
|
|
|
|
+ 查看客户
|
|
|
|
+ <uni-icons class="sub-label-icon" type="right" size="14"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <uni-icons class="home-filled" type="person-filled" size="40" color="#eee"></uni-icons>
|
|
|
|
|
|
+ <uni-icons class="home-filled" type="person-filled" size="40"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="good-box">
|
|
|
|
- <text>推荐房源</text>
|
|
|
|
|
|
+ <view class="house-box">
|
|
|
|
+ <view class="good-box">
|
|
|
|
+ <text>推荐房源</text>
|
|
|
|
+ </view>
|
|
|
|
+ <house-list></house-list>
|
|
</view>
|
|
</view>
|
|
- <house></house>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import house from '@/components/house/house'
|
|
|
|
|
|
+ import houseList from '@/components/house/houseList.vue'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -53,103 +58,115 @@
|
|
{
|
|
{
|
|
url: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f488a1cc0e904ed089d52d88e3c1b33d'
|
|
url: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f488a1cc0e904ed089d52d88e3c1b33d'
|
|
}
|
|
}
|
|
- ],
|
|
|
|
- modeIndex: -1,
|
|
|
|
- current: 0,
|
|
|
|
- swiperDotIndex: 0
|
|
|
|
|
|
+ ]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ onShow() {},
|
|
methods: {},
|
|
methods: {},
|
|
components: {
|
|
components: {
|
|
- house
|
|
|
|
- },
|
|
|
|
|
|
+ houseList
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
.index-container {
|
|
.index-container {
|
|
- padding: 0 30rpx;
|
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-
|
|
|
|
- .good-box {
|
|
|
|
- margin-top: 30rpx;
|
|
|
|
- position: relative;
|
|
|
|
- text-align: center;
|
|
|
|
-
|
|
|
|
- text {
|
|
|
|
- background: #f3f6f8;
|
|
|
|
- z-index: 9;
|
|
|
|
- position: relative;
|
|
|
|
- padding: 5px 10px;
|
|
|
|
- color: $uni-secondary-color;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &:before {
|
|
|
|
- content: '';
|
|
|
|
- bottom: 20rpx;
|
|
|
|
- position: absolute;
|
|
|
|
- left: 0;
|
|
|
|
- height: 1px;
|
|
|
|
- right: 0;
|
|
|
|
- background: #eee;
|
|
|
|
- z-index: 8;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ position: relative;
|
|
|
|
|
|
.project-box {
|
|
.project-box {
|
|
- padding: 30rpx 0;
|
|
|
|
- position: sticky;
|
|
|
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ background-color: $uni-white;
|
|
|
|
+ border-top: 1px solid $uni-border-2;
|
|
|
|
+ position: fixed;
|
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
|
+ top: 0;
|
|
|
|
+ /* #endif */
|
|
|
|
+ /* #ifdef H5 */
|
|
|
|
+ top: calc(44px + env(safe-area-inset-top));
|
|
|
|
+ /* #endif */
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ z-index: 99;
|
|
|
|
|
|
.project-name {
|
|
.project-name {
|
|
display: flex;
|
|
display: flex;
|
|
- font-size: 16px;
|
|
|
|
align-items: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
|
+ align-items: center;
|
|
|
|
+ flex: 1;
|
|
|
|
+ width: 0;
|
|
|
|
+ overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
.project-icon {
|
|
.project-icon {
|
|
margin-left: 8rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .change-role {
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ color: $uni-secondary-color;
|
|
|
|
+ border: 1px solid $uni-border-3;
|
|
|
|
+ width: 160rpx;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .role-icon {
|
|
|
|
+ text {
|
|
|
|
+ color: $uni-secondary-color !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ margin-right: 8rpx;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.banner-box {
|
|
.banner-box {
|
|
- border-radius: 20rpx;
|
|
|
|
- overflow: hidden;
|
|
|
|
- }
|
|
|
|
|
|
+ padding: 30rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ margin-top: 86rpx;
|
|
|
|
|
|
- .swiper-box {
|
|
|
|
- height: 400rpx;
|
|
|
|
- }
|
|
|
|
|
|
+ .swiper-box {
|
|
|
|
+ height: 400rpx;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
|
|
|
|
- .swiper-item {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- background-size: cover;
|
|
|
|
- background-position: bottom;
|
|
|
|
- }
|
|
|
|
|
|
+ .swiper-item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ background-position: bottom;
|
|
|
|
+ }
|
|
|
|
|
|
- .swiper-item-box:first-child {
|
|
|
|
- border-radius: 20rpx 0 0 20rpx;
|
|
|
|
- }
|
|
|
|
|
|
+ .swiper-item-box:first-child {
|
|
|
|
+ border-radius: 20rpx 0 0 20rpx;
|
|
|
|
+ }
|
|
|
|
|
|
- .swiper-item-box:last-child {
|
|
|
|
- border-radius: 0 20rpx 20rpx 0;
|
|
|
|
|
|
+ .swiper-item-box:last-child {
|
|
|
|
+ border-radius: 0 20rpx 20rpx 0;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.grid {
|
|
.grid {
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
- margin-top: 30rpx;
|
|
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
.grid-item {
|
|
.grid-item {
|
|
flex: 1;
|
|
flex: 1;
|
|
height: 180rpx;
|
|
height: 180rpx;
|
|
- background: #fff;
|
|
|
|
border-radius: 16rpx;
|
|
border-radius: 16rpx;
|
|
- color: #fff;
|
|
|
|
|
|
+ color: $uni-white;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- padding: 0 10px;
|
|
|
|
|
|
+ padding: 0 20rpx;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
|
|
&.red {
|
|
&.red {
|
|
@@ -162,29 +179,83 @@
|
|
}
|
|
}
|
|
|
|
|
|
.label {
|
|
.label {
|
|
- font-size: 36rpx;
|
|
|
|
|
|
+ font-size: 32rpx;
|
|
margin-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
.sub-label {
|
|
.sub-label {
|
|
- color: rgba(255, 255, 255, 0.5);
|
|
|
|
|
|
+ color: $uni-extras-color;
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
height: 40rpx;
|
|
height: 40rpx;
|
|
|
|
+ opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
.sub-label-icon {
|
|
.sub-label-icon {
|
|
- opacity: 0.7;
|
|
|
|
|
|
+ /* #ifdef H5 */
|
|
|
|
+ color: $uni-extras-color !important;
|
|
|
|
+
|
|
|
|
+ /* #endif */
|
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
|
+ text {
|
|
|
|
+ color: $uni-extras-color !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* #endif */
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
.grid-item:nth-child(2n) {
|
|
.grid-item:nth-child(2n) {
|
|
margin-left: 30rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.home-filled {
|
|
.home-filled {
|
|
- color: #eee;
|
|
|
|
opacity: 0.3;
|
|
opacity: 0.3;
|
|
|
|
+ /* #ifdef H5 */
|
|
|
|
+ color: $uni-extras-color !important;
|
|
|
|
+
|
|
|
|
+ /* #endif */
|
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
|
+ text {
|
|
|
|
+ color: $uni-extras-color !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* #endif */
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .house-box {
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ .good-box {
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ text-align: center;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ background: $uni-background-color;
|
|
|
|
+ z-index: 9;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
+ color: $uni-secondary-color;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:before {
|
|
|
|
+ content: '';
|
|
|
|
+ bottom: 20rpx;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ height: 1px;
|
|
|
|
+ right: 0;
|
|
|
|
+ background: $uni-border-2;
|
|
|
|
+ z-index: 8;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|