艺术广场 数字美术馆

package.json

@@ -12,6 +12,8 @@
     "@vueuse/core": "^9.1.0",
     "axios": "^0.27.2",
     "dayjs": "^1.11.5",
+    "element-plus": "^2.2.14",
+    "scss": "^0.2.4",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"
   },
@@ -26,4 +28,4 @@
     "vite-plugin-windicss": "^1.8.7",
     "windicss": "^3.5.6"
   }
-}
+}

src/components/ResourceSearch/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="search">
+    <h1 class="sear-title">特色作品,搜索一下</h1>
+    <div class="inp">
+      <input v-model="searMsg" type="text" placeholder="搜索关键字" />
+      <span class="inp-sear"></span>
+    </div>
+    <ul class="classify">
+      <li @click="classIndex=i" :class="[classIndex===i?'classes':'']" v-for="(c,i) in classes" :key="c">{{c}}</li>
+    </ul>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+const searMsg = ref("");
+const classes = ref(["微课", "课件", "教案", "微视频", "网络资源"]);
+const classIndex=ref(1);
+</script>
+<style lang="scss" scoped>
+.search {
+  width: 100%;
+  min-width: 1280px;
+  height: 457px;
+  padding: 20px 0;
+  background: url("../../assets/ysgc/back.png");
+  background-repeat: no-repeat;
+  .sear-title {
+    width: 400px;
+    height: 67px;
+    font-size: 48px;
+    margin: 0 auto;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    color: #000000;
+    line-height: 67px;
+  }
+  .inp {
+    width: 497px;
+    margin: 40px auto;
+    height: 50px;
+    line-height: 50px;
+    position: relative;
+    input {
+      background: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #00a3ff;
+      width: 100%;
+      height: 100%;
+      padding-left: 17px;
+    }
+    .inp-sear {
+      display: block;
+      width: 26px;
+      height: 26px;
+      background: #00a3ff;
+      border-radius: 6px;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-image: url("../../assets/ysgc/搜索@2x.png");
+      background-size: 60%;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+  }
+  .classify {
+    width: 300px;
+    height: 22px;
+    margin: 0 auto;
+    opacity: 0.6;
+    font-size: 16px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    font-weight: 400;
+    color: #000000;
+    line-height: 22px;
+    display: flex;
+    justify-content: space-between;
+    li {
+      position: relative;
+    }
+    li:not(:last-child)::after {
+      position: absolute;
+      content: "";
+      width: 1px;
+      height: 13px;
+      background-color: #000000;
+      top: 5px;
+      right: -13px;
+    }
+    .classes{
+    color: #000000;
+    font-weight: 550;
+    opacity: 1 !important;
+    }
+  }
+}
+
+</style>

src/main.js

@@ -3,9 +3,10 @@ import 'virtual:windi.css';
 
 import App from './App.vue'
 import router from './router/index';
-
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css'
 const app = createApp(App)
 app.use(router)
-
+app.use(ElementPlus)
 app.mount('#app')
 

src/pages/szmsg/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="ysgc">
+    <ResourceSearch></ResourceSearch>
+    <div class="ysgc-kind">
+      <ul class="specail">
+        <li class="kind-name">
+          <router-link to="/tskcz">
+            <h3>特色课程展</h3>
+            <p>辅导机构课程 场馆课程</p>
+            <div class="btn-more">
+              <button>查看更多</button>
+            </div>
+          </router-link>
+        </li>
+        <li class="kc" v-for="kc in 4" :key="kc">
+          <img class="kc-back" src="../../assets/ysgc/kc3.png" alt="" />
+          <div class="kc-des">
+            <p class="kc-name">安徒生世界插画</p>
+            <div class="rate">
+              <img
+                v-for="star in 5"
+                :key="star"
+                src="../../assets/ysgc/star.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="zan">
+            <img src="../../assets/ysgc/zan.png" /> 10w+
+            <img src="../../assets/ysgc/xin.png" alt="" />14w+
+          </div>
+        </li>
+      </ul>
+      <ul class="specail">
+        <li class="kind-name">
+          <h3>艺术联盟</h3>
+          <p>辅导机构课程 场馆课程</p>
+          <div class="btn-more">
+            <button>查看更多</button>
+          </div>
+        </li>
+        <li class="kc" v-for="kc in 1" :key="kc">
+          <img class="kc-back" src="../../assets/ysgc/kc3.png" alt="" />
+          <div class="kc-des">
+            <p class="kc-name">传送门</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import ResourceSearch from "../../components/ResourceSearch/index.vue";
+import { ref } from "vue";
+</script>
+<style lang="scss" scoped>
+.ysgc {
+  width: 100%;
+  min-width: 1280px;
+  .ysgc-kind {
+    // width: 1650px;
+    min-width: 1280px;
+    margin: 0 auto;
+    margin-top: -180px;
+    .specail {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      li {
+        margin: 0 27px 27px 0;
+        overflow: hidden;
+      }
+      .kind-name {
+        width: 332px;
+        height: 274px;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
+        padding: 49px 20px;
+        box-sizing: border-box;
+        background-image: url("../../assets/ysgc/tskc.png");
+        background-position: center -15px;
+        h3 {
+          width: 263px;
+          height: 37px;
+          font-size: 26px;
+          font-family: PingFangSC, PingFangSC-Medium;
+          font-weight: 500;
+          text-align: left;
+          color: #050026;
+          line-height: 37px;
+        }
+        p {
+          width: 246px;
+          height: 22px;
+          font-size: 16px;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          text-align: left;
+          color: #050026;
+          line-height: 22px;
+          margin-top: 25px;
+        }
+        .btn-more {
+          width: 111px;
+          height: 31px;
+          padding: 2px;
+          box-sizing: border-box;
+          border-radius: 38px;
+          margin-top: 45px;
+          background: linear-gradient(127deg, #3f64ff 10%, #8f78f8 91%);
+          button {
+            width: 100%;
+            height: 100%;
+            padding-left: 6px;
+            background: #fff;
+            border-radius: 38px;
+            font-weight: 400;
+            font-size: 14px;
+            color: #6c5dd3;
+            line-height: 20px;
+            letter-spacing: 0.6px;
+            border-image: linear-gradient(127deg, #3f64ff 10%, #8f78f8 91%) 1 1;
+          }
+        }
+      }
+      .kc {
+        width: 337px;
+        height: 278px;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
+        position: relative;
+        .kc-back {
+          width: 100%;
+        }
+        .kc-des {
+          padding: 11px 6px;
+          box-sizing: border-box;
+          .kc-name {
+            height: 22px;
+            font-size: 16px;
+            font-family: PingFangSC, PingFangSC-Regular;
+            font-weight: 400;
+            color: #000000;
+            line-height: 22px;
+          }
+          .rate {
+            display: flex;
+            margin: 11px 0;
+            img {
+              margin-right: 6px;
+            }
+          }
+        }
+        .zan {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 173px;
+          height: 34px;
+          line-height: 34px;
+          font-size: 14px;
+          color: #fff;
+          display: flex;
+          padding-left: 20px;
+          background: rgba(0, 0, 0, 0.59);
+          border-radius: 0px 12px 0px 12px;
+          img {
+            display: inline-block;
+            width: 17px;
+            height: 16px;
+            margin: 8px 5px 0 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/szmsg/tskcz/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        特色
+    </div>
+</template>

src/pages/ysgc/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="ysgc">
+    <ResourceSearch></ResourceSearch>
+    <div class="ysgc-kind">
+      <ul class="specail">
+        <li class="kind-name">
+          <h3>特色课程展</h3>
+          <p>辅导机构课程 场馆课程</p>
+          <div class="btn-more">
+            <button>查看更多</button>
+          </div>
+        </li>
+        <li class="kc" v-for="kc in 4" :key="kc">
+          <img class="kc-back" src="../../assets/ysgc/kc3.png" alt="" />
+          <div class="kc-des">
+            <p class="kc-name">安徒生世界插画</p>
+            <div class="rate">
+              <img
+                v-for="star in 5"
+                :key="star"
+                src="../../assets/ysgc/star.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="zan">
+            <img src="../../assets/ysgc/zan.png" /> 10w+
+            <img src="../../assets/ysgc/xin.png" alt="" />14w+
+          </div>
+        </li>
+      </ul>
+       <ul class="specail">
+        <li class="kind-name">
+          <h3>艺术联盟</h3>
+          <p>辅导机构课程 场馆课程</p>
+          <div class="btn-more">
+            <button>查看更多</button>
+          </div>
+        </li>
+        <li class="kc" v-for="kc in 1" :key="kc">
+          <img class="kc-back" src="../../assets/ysgc/kc3.png" alt="" />
+          <div class="kc-des">
+            <p class="kc-name">传送门</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script setup>
+import ResourceSearch from "../../components/ResourceSearch/index.vue";
+import { ref } from "vue";
+</script>
+<style lang="scss" scoped>
+.ysgc {
+  width: 100%;
+  min-width: 1280px;
+  .ysgc-kind {
+    // width: 1650px;
+    min-width: 1280px;
+    margin: 0 auto;
+    margin-top: -180px;
+    .specail {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      li {
+        margin: 0 27px 27px 0;
+        overflow: hidden;
+      }
+      .kind-name {
+        width: 332px;
+        height: 274px;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
+        padding: 49px 20px;
+        box-sizing: border-box;
+        background-image: url("../../assets/ysgc/tskc.png");
+        background-position: center -15px;
+        h3 {
+          width: 263px;
+          height: 37px;
+          font-size: 26px;
+          font-family: PingFangSC, PingFangSC-Medium;
+          font-weight: 500;
+          text-align: left;
+          color: #050026;
+          line-height: 37px;
+        }
+        p {
+          width: 246px;
+          height: 22px;
+          font-size: 16px;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          text-align: left;
+          color: #050026;
+          line-height: 22px;
+          margin-top: 25px;
+        }
+        .btn-more {
+          width: 111px;
+          height: 31px;
+          padding: 2px;
+          box-sizing: border-box;
+          border-radius: 38px;
+          margin-top: 45px;
+          background: linear-gradient(127deg, #3f64ff 10%, #8f78f8 91%);
+          button {
+            width: 100%;
+            height: 100%;
+            padding-left: 6px;
+            background: #fff;
+            border-radius: 38px;
+            font-weight: 400;
+            font-size: 14px;
+            color: #6c5dd3;
+            line-height: 20px;
+            letter-spacing: 0.6px;
+            border-image: linear-gradient(127deg, #3f64ff 10%, #8f78f8 91%) 1 1;
+          }
+        }
+      }
+      .kc {
+        width: 337px;
+        height: 278px;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
+        position: relative;
+        .kc-back {
+          width: 100%;
+        }
+        .kc-des {
+          padding: 11px 6px;
+          box-sizing: border-box;
+          .kc-name {
+            height: 22px;
+            font-size: 16px;
+            font-family: PingFangSC, PingFangSC-Regular;
+            font-weight: 400;
+            color: #000000;
+            line-height: 22px;
+          }
+          .rate {
+            display: flex;
+            margin: 11px 0;
+            img {
+              margin-right: 6px;
+            }
+          }
+        }
+        .zan {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 173px;
+          height: 34px;
+          line-height: 34px;
+          font-size: 14px;
+          color: #fff;
+          display: flex;
+          padding-left: 20px;
+          background: rgba(0, 0, 0, 0.59);
+          border-radius: 0px 12px 0px 12px;
+          img {
+            display: inline-block;
+            width: 17px;
+            height: 16px;
+            margin: 8px 5px 0 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -12,7 +12,18 @@ export default createRouter({
           title:'首页',
           component: () => import("~/pages/home/index.vue"),
       },
-
+      {
+        path:'/ysgc',
+        component: () => import("~/pages/ysgc/index.vue"),
+      },
+      {
+        path:'/szmsg',
+        component: () => import("~/pages/szmsg/index.vue"),
+      },
+      {
+        path:'/tskcz',
+        component: () => import('~/pages/szmsg/tskcz/index.vue'),
+      }
   ]
 })