小程序产品库完成

2022-02-14 17:25:54 +08:00
parent cb5f434edb
commit 8d2905428e
145 changed files with 22037 additions and 0 deletions
--- a/src/components/AiDetail/AiDetail.vue
+++ b/src/components/AiDetail/AiDetail.vue
@@ -0,0 +1,149 @@
+<template>
+  <section class="AiDetail">
+    <div class="content">
+      <div class="title">{{detail.title}}</div>
+      <div class="info">
+        <span>{{detail.createTime}}</span>
+        <span class="right">
+          <em>{{detail.viewCount}}</em>人看过
+        </span>
+      </div>
+      <slot v-if="$slots.content" name="content"/>
+      <u-parse v-else :html="detail.content"/>
+    </div>
+<!--    <div class="files" v-if="detail.contentType==0 && detail.files && detail.files.length">-->
+<!--      <img class="file-img" :src="file.url" @click.native="preview(index)" alt="" v-for="(file,index) in detail.files" :key="index">-->
+<!--    </div>-->
+
+    <div class="files" v-if="detail.contentType==1 && detail.files && detail.files.length">
+      <video class="file-img" :src="file.url" v-for="(file,index) in detail.files" :key="index"></video>
+    </div>
+
+    <div v-if="comment" class="comments">
+    </div>
+  </section>
+</template>
+
+<script>
+import AiImage from "../../components/AiImage/AiImage";
+import AiTopFixed from "../../components/AiTopFixed/AiTopFixed";
+export default {
+  name: "AiDetail",
+  components: {AiImage, AiTopFixed},
+  props: {
+    title: {default: ""},
+    detail: {default: () => ({})},
+    comment: Boolean
+  },
+  methods: {
+    preview(index) {
+      this.$previewImage(this.detail.files,index,"url");
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDetail {
+  min-height: 100vh;
+  background: #ffffff;
+
+  .header {
+    .title {
+      font-weight: bold;
+      font-size: 48px;
+    }
+
+    .bottomBar {
+      justify-content: space-between;
+      margin-top: 16px;
+      color: #999;
+
+      .u-icon + .u-icon {
+        margin-left: 32px;
+      }
+    }
+  }
+
+  .content{
+    padding: 32px;
+    background: #fff;
+
+    &.content {
+      margin-bottom: 20px;
+
+      .title{
+        font-size: 38px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 52px;
+        margin-bottom: 32px;
+      }
+
+      .info {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 64px;
+        font-size: 30px;
+        font-weight: 400;
+        color: #999999;
+
+        .right{
+          display: flex;
+          align-items: center;
+
+          & > em{
+            color: #4181FF;
+          }
+        }
+      }
+    }
+  }
+
+  .files {
+    padding: 0 32px;
+    background: #fff;
+
+    .file-img{
+      width:100%;
+      height:486px;
+      margin-bottom:32px;
+    }
+  }
+
+  .imageList {
+    justify-content: space-around;
+
+    .AiImage {
+      margin-right: 8px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .fileList {
+    & > div {
+      margin-bottom: 8px;
+    }
+
+    .info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      margin-left: 16px;
+      word-break: break-all;
+      align-items: center;
+
+      & > span {
+        flex: 1;
+        min-width: 0;
+      }
+
+      & > i {
+        flex-shrink: 0;
+      }
+    }
+
+  }
+}
+</style>