first commit

pgapp/pages/work/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class="work-container">
+    <!-- 轮播图 -->
+    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
+      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
+        <swiper-item v-for="(item, index) in data" :key="index">
+          <view class="swiper-item" @click="clickBannerItem(item)">
+            <image :src="item.image" mode="aspectFill" :draggable="false" />
+          </view>
+        </swiper-item>
+      </swiper>
+    </uni-swiper-dot>
+
+    <!-- 宫格组件 -->
+    <uni-section title="工作台" type="line"></uni-section>
+    <view class="grid-body" style="display: flex; justify-content: center;">
+      <uni-grid :column="3" :showBorder="false" @change="changeGrid">
+        <uni-grid-item  :index = "0">
+          <view class="grid-item-box">
+            <uni-icons type="person-filled" size="30"></uni-icons>
+            <text class="text">询价项目</text>
+          </view>
+        </uni-grid-item>
+        <uni-grid-item :index = "1">
+          <view class="grid-item-box">
+            <uni-icons type="eye-filled" size="30"></uni-icons>
+            <text class="text">查勘项目</text>
+          </view>
+        </uni-grid-item>
+       <uni-grid-item :index = "2">
+          <view class="grid-item-box">
+            <uni-icons type="color" size="30"></uni-icons>
+            <text class="text">自动询价</text>
+          </view>
+        </uni-grid-item>
+		<uni-grid-item :index = "3">
+		  <view class="grid-item-box">
+		    <uni-icons type="home-filled" size="30"></uni-icons>
+		    <text class="text">登陆界面</text>
+		  </view>
+		</uni-grid-item>
+      </uni-grid>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        current: 0,
+        swiperDotIndex: 0,
+        data: [{
+            image: '/static/images/banner/banner01.jpg'
+          },
+          {
+            image: '/static/images/banner/banner02.jpg'
+          },
+          {
+            image: '/static/images/banner/banner03.jpg'
+          }
+        ]
+      }
+    },
+    methods: {
+      clickBannerItem(item) {
+        console.info(item)
+      },
+      changeSwiper(e) {
+        this.current = e.detail.current
+      },
+      handleToLogin() {
+        this.$tab.reLaunch('/pages/login')
+      },
+      changeGrid(e) {
+        const index = e.detail.index
+        if (index == 0) {
+          this.$tab.navigateTo('/pages/inquiry/index')
+        } else if (index ==1) {
+          this.$tab.navigateTo('/pages/survey/index')
+        } else if (index == 2) {
+          this.$tab.navigateTo('/pages/automatic/index')
+        }else {
+          this.$tab.reLaunch('/pages/login')
+        }
+        this.$modal.showToast('模块建设中~')
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #fff;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+
+  /* #endif */
+
+	.grid-body {
+	  display: flex;
+	  justify-content: center;
+	  margin-top: 20rpx; 
+	  
+	}
+	
+  .text {
+    text-align: center;
+    font-size: 26rpx;
+    margin-top: 10rpx;
+  }
+
+  .grid-item-box {
+    flex: 1;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 15px 0;
+  }
+
+  .uni-margin-wrap {
+    width: 690rpx;
+    width: 100%;
+    ;
+  }
+
+  .swiper {
+    height: 300rpx;
+  }
+
+  .swiper-box {
+    height: 150px;
+  }
+
+  .swiper-item {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    height: 300rpx;
+    line-height: 300rpx;
+  }
+
+  @media screen and (min-width: 500px) {
+    .uni-swiper-dot-box {
+      width: 400px;
+      /* #ifndef APP-NVUE */
+      margin: 0 auto;
+      /* #endif */
+      margin-top: 8px;
+    }
+
+    .image {
+      width: 100%;
+    }
+  }
+</style>