图片

2024-06-17 17:58:05 +08:00
parent e2e3f35e17
commit 7cdb62180b
46 changed files with 2181 additions and 14 deletions
--- a/src/components/AiListPage/AiListPage.vue
+++ b/src/components/AiListPage/AiListPage.vue
@@ -0,0 +1,115 @@
+<template>
+  <section class="AppListPage">
+    <div class="header" :style="{backgroundImage: url(headerBg)}">
+      <img :src="headerBg" alt="">
+      <p>{{label}}</p>
+    </div>
+    <div class="content">
+      <div class="title">{{label}}</div>
+      <div class="app-list">
+        <div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.url)" >
+          <!-- <div class="icon" :style="{backgroundImage: url(item.icon)}"></div> -->
+          <img :src="item.icon" alt="" class="icon">
+          <p>{{item.name}}</p>
+        </div>
+      </div>
+    </div>  
+    
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "AppListPage",
+  props: {
+    label: String,
+    appList: Array,
+    headerBg: String
+  },
+  methods: {
+    linkTo(url) {
+      console.log(111)
+      console.log(url)
+      uni.navigateTo({url})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppListPage {
+  padding-top: 20px;
+  .header{
+    width: calc(100% - 36px);
+    height: 240px;
+    margin: 0 18px 20px 18px;
+    background-size: 100% 100%;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    p{
+      position: absolute;
+      top: 48px;
+      left: 50px;
+      font-size: 46px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #26385C;
+      line-height: 64px;
+      // padding: 48px 50px 0 50px;
+      word-break: break-all;
+    }
+  }
+  .content{
+    margin: 0 20px 20px;
+    width: calc(100% - 40px);
+    background: #FFF;
+    border-radius: 16px;
+    .title{
+      line-height: 70px;
+      border-bottom: 1px solid #eee;
+      padding-left: 20px;
+      font-size: 26px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #999;
+    }
+    .app-list{
+      overflow: hidden;
+      .item{
+        text-align: center;
+        padding-bottom: 38px;
+        border-right: 1px solid #eee;
+        border-top: 1px solid #eee;
+        width: calc(33% - 1px);
+        float: left;
+        .icon{
+          display: inline-block;
+          width: 58px;
+          height: 58px;
+          margin: 40px 0 18px 0;
+          background-size: 100% 100%;
+          text-align: center;
+        }
+        p{
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #3D434A;
+          line-height: 40px;
+        }
+      }
+      .item:nth-of-type(3n) {
+        border-right: 0;
+      }
+      .item:nth-of-type(1),
+      .item:nth-of-type(2),
+      .item:nth-of-type(3) {
+        border-top: 0;
+      }
+    }
+  }
+}
+</style>