update: 商品详情

src/pages/Activity/ActivityDetail/index.vue

+<template>
+  <div class="wrapper">
+    <div class="activityDetail">
+      <header class="header">
+        <h3>
+          本周六四月三日 洞鞋子 周日就可以常抓这是给 请仔细阅读下面的文字
+          关注中澳提示
+        </h3>
+        <p class="endTime">距结束 22:77:88</p>
+      </header>
+      <section class="content">
+        <el-card class="activityGoods box-card">
+          <p class="title">拼单商品</p>
+          <div>
+            <el-image class="activityImage"
+              style="width: 100px; height: 100px"
+              :src="url"
+              :fit="fit"
+            ></el-image>
+           <el-image class="activityImage"
+              style="width: 100px; height: 100px"
+              :src="url"
+              :fit="fit"
+            ></el-image>
+          </div>
+        </el-card>
+        <el-card class="activityIntroduce box-card">
+          <p class="introduceText">
+            这是一大片介绍信息 布拉布拉这是一大片介绍信息
+            布拉布拉这是一大片介绍信息 布拉布拉这是一大片介绍信息
+            布拉布拉这是一大片介绍信息 布拉布拉这是一大片介绍信息
+            布拉布拉这是一大片介绍信息 布拉布拉这是一大片介绍信息 布拉布拉
+          </p>
+          <el-image class="activityImage"
+              style="width: 500px; height: 400px"
+              :src="url"
+              :fit="fit"
+            ></el-image>
+        </el-card>
+        <el-card class="activities box-card">
+          <div v-for="(item,index) in activityDetailList" :key="index" class="activityItem">
+             <el-image class="activityImage"
+              style="width: 100px; height: 100px"
+              :src="url"
+              :fit="fit"
+            ></el-image>
+            <div class="itemIntroduce">
+                <p>f发布写干洗 戏内除菌 消毒 数遍洗干净</p>
+                <p>
+                    <span>$99</span>
+                    <span>$999</span>
+                </p>
+            </div>
+            <div>
+              <div class="detail"></div>
+              <div class="price"></div>
+            </div>
+          </div>
+        </el-card>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      fits: ["fill", "contain", "cover", "none", "scale-down"], // 图片属性
+      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      activityDetailList:[1,2,3]
+    };
+  },
+  watch: {},
+  computed: {},
+  methods: {},
+  created() {},
+  mounted() {},
+};
+</script>
+<style lang="less" scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 45px 10px 0;
+  .activityDetail {
+    width: 500px;
+    .header {
+      .endTime {
+        margin: 5px 0;
+        font-size: 15px;
+        color: red;
+      }
+    }
+    .content{
+        .box-card{
+            margin: 10px 0;
+        }
+        .activityGoods{
+            .title{
+                
+            }
+            .activityImage{
+                margin: 10px 10px 0 0;
+            }
+        }
+        .activityIntroduce{
+            padding: 5px 0;
+            .introduceText{
+                margin-bottom: 20px;
+            }
+        }
+        .activities{
+            .activityItem{
+                  display: flex;
+                  margin:15px 0;
+                .itemIntroduce{
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                   margin-left: 10px;
+                   >p{
+                       width: 200px;
+                   }
+                }
+            }
+        }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/router/Activity/index.js

@@ -18,6 +18,13 @@
       name: "releaseProduc",
       component: () => import(/* webpackChunkName: "activity" */ "@/pages/Activity/releaseProduc")
     },
+    // 标题详情
+    {
+      path:"/op/activity/activityDetail",
+      name:"ActivityDetail",
+      component: () => import(/* webpackChunkName: "activity" */ "@/pages/Activity/ActivityDetail")
+
+    },
     {
       path: "/op/activity/releaseProduc/spellOrderSet",
       name: "spellOrderSet",