|
@@ -1,34 +1,155 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <button @click="wxLogin">登录</button>
|
|
|
- <button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信手机号一键登录</button>
|
|
|
+ <view class="container index-container">
|
|
|
+ <view class="project-box">
|
|
|
+ <view class="project-name">
|
|
|
+ <span class="label">项目名称</span>
|
|
|
+ <uni-icons class="project-icon" type="right" size="16"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+ <view class="grid">
|
|
|
+ <view class="grid-item red">
|
|
|
+ <view>
|
|
|
+ <view class="label">房源列表</view>
|
|
|
+ <view class="sub-label">查看房源<uni-icons class="sub-label-icon" type="right" size="14"
|
|
|
+ color="#eee"></uni-icons></view>
|
|
|
+ </view>
|
|
|
+ <uni-icons class="home-filled" type="home-filled" size="40" color="#eee"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view class="grid-item blue">
|
|
|
+ <view>
|
|
|
+ <view class="label">客户管理</view>
|
|
|
+ <view class="sub-label">查看客户<uni-icons class="sub-label-icon" type="right" size="14"
|
|
|
+ color="#eee"></uni-icons></view>
|
|
|
+ </view>
|
|
|
+ <uni-icons class="home-filled" type="person-filled" size="40" color="#eee"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- wxLogin() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/login/login'
|
|
|
- })
|
|
|
- // uni.login({
|
|
|
- // provider: 'weixin', //使用微信登录
|
|
|
- // success: function(loginRes) {
|
|
|
- // console.log(loginRes);
|
|
|
- // }
|
|
|
- // });
|
|
|
- },
|
|
|
- getPhoneNumber(e) {
|
|
|
- console.log(e.detail);
|
|
|
+ return {
|
|
|
+ info: [{
|
|
|
+ url: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f488a1cc0e904ed089d52d88e3c1b33d'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ modeIndex: -1,
|
|
|
+ current: 0,
|
|
|
+ swiperDotIndex: 0
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
- .container {}
|
|
|
+<style lang="scss">
|
|
|
+ .index-container {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .project-box {
|
|
|
+ padding: 30rpx 0;
|
|
|
+
|
|
|
+ .project-name {
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-icon {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .banner-box {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-box {
|
|
|
+ height: 400rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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:last-child {
|
|
|
+ border-radius: 0 20rpx 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ .grid-item {
|
|
|
+ flex: 1;
|
|
|
+ height: 180rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ background: linear-gradient(to right, rgb(242, 79, 104), rgb(237, 133, 152));
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ background: linear-gradient(to right, rgb(69, 159, 230), rgb(108, 201, 228));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-label {
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-label-icon {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-item:nth-child(2n) {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-filled {
|
|
|
+ color: #eee;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|