AppWorkonline

src/apps/AppWorkonline/AppWorkonline.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="workonline">
+    <div class="search">
+      <u-search class="serach_content" placeholder="请输入标题" :show-action="false" v-model="keyword" @clear="clearSearch" @search="search"></u-search>
+    </div>
+
+    <template v-if="datas.length == 0">
+      <u-card v-for="(items, index) in 4" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
+        <view class="body" slot="body">
+          <view class="u-body-item">
+            <div class="title">基本养老保险灵活就业人员新参保业务</div>
+          </view>
+
+          <view class="u-body-item">
+            <div class="plan">
+              <span>审批进度：</span>
+              <span>审批中</span>
+            </div>
+          </view>
+
+          <view class="u-body-item">
+            <div class="modetpye">
+              <span>申请类型：</span>
+              <span>社会保障</span>
+            </div>
+          </view>
+
+          <view class="u-body-item">
+            <div class="applytime">
+              <span>申请日期：</span>
+              <span class="timeContent">2021-01-21 14:30</span>
+            </div>
+          </view>
+
+          <view class="u-body-item">
+            <div class="overtime">
+              <span>完成日期：</span>
+              <span class="timeContent">2021-01-21 14:30</span>
+            </div>
+          </view>
+
+          <img src="../AppWorkonline/components/end.png" alt="" />
+        </view>
+      </u-card>
+
+      <u-loadmore status="nomore" color="#999" font-size="24" margin-top="32" margin-bottom="80" />
+    </template>
+
+    <AiEmpty description="没有数据" v-else> </AiEmpty>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'workonline',
+  appName: '网上办事',
+  components: {},
+  props: {},
+  data() {
+    return {
+      datas: [],
+      keyword: '',
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.$dict.load('').then(() => {
+      this.getList()
+    })
+  },
+  mounted() {},
+  methods: {
+    getList() {},
+
+    goDetail(item) {
+      
+    },
+
+    search(e) {
+      this.keyword = e
+      this.current = 1
+      this.getList()
+    },
+
+    clearSearch() {
+      this.keyword = ''
+      this.current = 1
+      this.getList()
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.workonline {
+  height: 100%;
+  .search {
+    background-color: #fff;
+    .serach_content {
+      height: 104px;
+      line-height: 104px;
+      box-sizing: border-box;
+      padding: 0 32px;
+    }
+  }
+
+  .u-card {
+    ::v-deep .u-card__body {
+      .body {
+        position: relative;
+        .u-body-item {
+          .title {
+            font-size: 32px;
+            font-weight: 500;
+            margin-bottom: 16px;
+          }
+          .plan,
+          .modetpye,
+          .applytime,
+          .overtime {
+            margin-top: 16px;
+            font-size: 30px;
+            color: #999999;
+            .timeContent {
+              color: #343d65;
+            }
+          }
+        }
+        img {
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 113px;
+          height: 113px;
+        }
+      }
+    }
+  }
+
+  .card {
+    margin: 32px 32px 0 32px;
+    padding: 30px 0 40px 30px;
+    background: #fff;
+    .title {
+      font-size: 32px;
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+    .plan,
+    .modetpye,
+    .applytime,
+    .overtime {
+      margin-top: 16px;
+      font-size: 30px;
+      color: #999999;
+      .timeContent {
+        color: #343d65;
+      }
+    }
+  }
+}
+</style>