From 0d667642d6c639f9c84b2e931e9e27e17d3ebb66 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 24 Oct 2023 10:22:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html              |   2 +-
 src/layouts/header/index.vue   | 106 +++++++--------
 src/layouts/home/index.vue     |   3 -
 src/layouts/navbar/index.vue   |  18 +--
 src/pages/index/list/index.vue | 227 ++++++++++++++++-----------------
 src/pages/member/index.vue     | 105 ++++++++-------
 src/styles/page/page.scss      | 174 ++++++++++++-------------
 7 files changed, 314 insertions(+), 321 deletions(-)

diff --git a/public/index.html b/public/index.html
index 870c2e1..9f1e4e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
         <meta name="keywords" content="职站商城,深圳或然科技,或然科技,教育产业互联网,金融科技,实训软件,虚拟仿真,数字经济,国泰安" />
         <meta name="description" content="一站式数字经济实训软件采购商城" />
         <meta name="baidu-site-verification" content="code-TRfXe8xIkJ" />
-        <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
+        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
         <!-- <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> -->
         <script>
             var _hmt = _hmt || [];
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index 5b9c541..16673d0 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -6,24 +6,24 @@
            alt="">
     </a>
     <!-- pc端 -->
-    <!-- <template v-if="$store.getters.getModelType"> -->
-    <navbar v-if="navShow"
-            ref="nav"
-            :isHome.sync="isHome"
-            :isEstate.sync="isEstate"
-            :isIasf.sync="isIasf"
-            @showMoreBtns="updateBtnsType"></navbar>
-    <div class="tools">
-      <div class="login"
-           @click="qrcodeVisible = true">
-        <img src="@/assets/images/user.png"
-             alt="">
-        <span>注册登录</span>
+    <template v-if="$store.getters.getModelType">
+      <navbar v-if="navShow"
+              ref="nav"
+              :isHome.sync="isHome"
+              :isEstate.sync="isEstate"
+              :isIasf.sync="isIasf"
+              @showMoreBtns="updateBtnsType"></navbar>
+      <div class="tools">
+        <div class="login"
+             @click="qrcodeVisible = true">
+          <img src="@/assets/images/user.png"
+               alt="">
+          <span>注册登录</span>
+        </div>
       </div>
-    </div>
-    <!-- </template> -->
+    </template>
     <!-- 手机端 -->
-    <!-- <template v-else>
+    <template v-else>
       <i class="rightBox"
          :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' "
          @click="updateModelType"></i>
@@ -34,7 +34,7 @@
                 :updateModelType="updateType"></navbar>
       </div>
 
-    </template> -->
+    </template>
 
     <el-dialog title=""
                :visible.sync="qrcodeVisible"
@@ -298,41 +298,41 @@ $height: 90px;
         color: #fff;
     }
 }
-// @media (max-width: 1660px) {
-//     .header {
-//         .logo {
-//             left: 10px;
-//         }
-//         .search {
-//             margin-right: 20px !important;
-//         }
-//         .tools {
-//             right: 30px;
-//         }
-//     }
-// }
+@media (max-width: 1660px) {
+    .header {
+        .logo {
+            left: 10px;
+        }
+        .search {
+            margin-right: 20px !important;
+        }
+        .tools {
+            right: 30px;
+        }
+    }
+}
 
-// @media (max-width: 1200px) {
-//     .header {
-//         color: black !important;
-//         background-color: #fff;
-//     }
-//     .contentBox {
-//         .searchBox,
-//         .languageBox {
-//             padding-left: 20px;
-//             height: 40px;
-//             line-height: 40px;
-//         }
-//     }
-//     .search-wrap {
-//         right: 10px;
-//         top: 0;
-//         width: 70%;
-//         input {
-//             width: 15rem;
-//             padding: 0 0.5rem 0 0.1rem;
-//         }
-//     }
-// }
+@media (max-width: 1200px) {
+    .header {
+        color: black !important;
+        background-color: #fff;
+    }
+    .contentBox {
+        .searchBox,
+        .languageBox {
+            padding-left: 20px;
+            height: 40px;
+            line-height: 40px;
+        }
+    }
+    .search-wrap {
+        right: 10px;
+        top: 0;
+        width: 70%;
+        input {
+            width: 15rem;
+            padding: 0 0.5rem 0 0.1rem;
+        }
+    }
+}
 </style>
diff --git a/src/layouts/home/index.vue b/src/layouts/home/index.vue
index 13c1ce2..45e14ce 100644
--- a/src/layouts/home/index.vue
+++ b/src/layouts/home/index.vue
@@ -76,9 +76,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.main {
-    min-width: 1050px;
-}
 .main:not(.channel) {
     min-height: calc(100% - 90px);
     .layout {
diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index da50282..47c78bb 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -3,7 +3,7 @@
     <el-menu :class="['nav', {home: isHome, estate: isEstate,changing: !showMenu}]"
              ref="elMenu"
              :key="menuRefresh"
-             mode="horizontal"
+             :mode="$store.getters.getModelType ? 'horizontal' : 'vertical' "
              :background-color="bgColor"
              :text-color="textColor"
              :active-text-color="activeTextColor"
@@ -236,12 +236,12 @@ $height: 90px;
         }
     }
 }
-// @media (max-width: 1200px) {
-//     /deep/.nav {
-//         .el-menu-item {
-//             padding: 0 8px;
-//             color: black !important;
-//         }
-//     }
-// }
+@media (max-width: 1200px) {
+    /deep/.nav {
+        .el-menu-item {
+            padding: 0 8px;
+            color: black !important;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index 9db8599..977bf2d 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -8,11 +8,13 @@
       <template v-for="(item, i) in modules[0].list">
         <el-carousel-item v-if="item.pic && item.isEnable"
                           :key="i">
-          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
+          <div class="pic"
+               :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
+          <!-- <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
                width="100%"
                :src="item.pic"
                alt=""
-               @click="openLink(item)">
+               @click="openLink(item)"> -->
           <div class="text-wrap">
             <div v-if="!i"
                  class="qrcode-wrap">
@@ -517,8 +519,13 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-    min-width: 1150px;
     .carousel {
+        .pic {
+            height: 100%;
+            background-position: center center;
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+        }
         img {
             height: 100%;
         }
@@ -898,120 +905,112 @@ export default {
         }
     }
 }
-@media (max-width: 1150px) {
+@media (max-width: 1200px) {
     .wrap {
-        min-width: 980px;
+        .carousel {
+            .text-wrap {
+                left: 40px;
+            }
+            .qrcode-wrap {
+                margin-right: 20px;
+            }
+        }
         .inner {
-            width: 98%;
+            width: 90%;
+        }
+        .type-wrap {
+            flex-direction: column;
+        }
+        .search {
+            margin-top: 20px;
+        }
+        .filter {
+            .vals {
+                width: calc(100% - 100px);
+            }
+        }
+    }
+}
+@media (max-width: 1000px) {
+    .wrap {
+        .carousel {
+            .text-wrap {
+                top: 47%;
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .qrcode-wrap {
+                margin: 0 0 20px 0;
+            }
+            h6 {
+                font-size: 1.8rem;
+            }
+            .sub {
+                font-size: 1.3rem;
+            }
+        }
+        .intro {
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+            li {
+                flex: 1;
+                margin-bottom: 20px;
+            }
+        }
+        .type-wrap {
+            .tab-wrap {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .tab {
+                margin-top: 10px;
+            }
+        }
+        .courses {
+            li {
+                width: calc((100% - 22px) / 2);
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+}
+@media (max-width: 640px) {
+    .wrap {
+        .carousel {
+            .text-wrap {
+                top: 47%;
+            }
+            .qrcode {
+                width: 80px;
+                height: 80px;
+            }
+            h6 {
+                font-size: 1.4rem;
+            }
+            .sub {
+                font-size: 1rem;
+            }
+        }
+        .type-wrap {
+            .tab {
+                flex-wrap: wrap;
+                li {
+                    margin-bottom: 20px;
+                }
+            }
+        }
+        .search {
+            margin-top: 0;
+        }
+        .courses {
+            li {
+                width: 100%;
+                margin-right: 0;
+            }
         }
     }
 }
-// @media (max-width: 1200px) {
-//     .wrap {
-//         .carousel {
-//             .text-wrap {
-//                 left: 40px;
-//             }
-//             .qrcode-wrap {
-//                 margin-right: 20px;
-//             }
-//         }
-//         .inner {
-//             width: 90%;
-//         }
-//         .type-wrap {
-//             flex-direction: column;
-//         }
-//         .search {
-//             margin-top: 20px;
-//         }
-//         .filter {
-//             .vals {
-//                 width: calc(100% - 100px);
-//             }
-//         }
-//     }
-// }
-// @media (max-width: 1000px) {
-//     .wrap {
-//         .carousel {
-//             .text-wrap {
-//                 top: 47%;
-//                 flex-direction: column;
-//                 align-items: flex-start;
-//             }
-//             .qrcode-wrap {
-//                 margin: 0 0 20px 0;
-//             }
-//             h6 {
-//                 font-size: 1.8rem;
-//             }
-//             .sub {
-//                 font-size: 1.3rem;
-//             }
-//         }
-//         .intro {
-//             flex-direction: column;
-//             justify-content: center;
-//             align-items: flex-start;
-//             li {
-//                 flex: 1;
-//                 margin-bottom: 20px;
-//             }
-//         }
-//         .type-wrap {
-//             .tab-wrap {
-//                 flex-direction: column;
-//                 align-items: flex-start;
-//             }
-//             .tab {
-//                 margin-top: 10px;
-//             }
-//         }
-//         .courses {
-//             li {
-//                 width: calc((100% - 22px) / 2);
-//                 &:nth-child(2n) {
-//                     margin-right: 0;
-//                 }
-//             }
-//         }
-//     }
-// }
-// @media (max-width: 640px) {
-//     .wrap {
-//         .carousel {
-//             .text-wrap {
-//                 top: 47%;
-//             }
-//             .qrcode {
-//                 width: 80px;
-//                 height: 80px;
-//             }
-//             h6 {
-//                 font-size: 1.4rem;
-//             }
-//             .sub {
-//                 font-size: 1rem;
-//             }
-//         }
-//         .type-wrap {
-//             .tab {
-//                 flex-wrap: wrap;
-//                 li {
-//                     margin-bottom: 20px;
-//                 }
-//             }
-//         }
-//         .search {
-//             margin-top: 0;
-//         }
-//         .courses {
-//             li {
-//                 width: 100%;
-//                 margin-right: 0;
-//             }
-//         }
-//     }
-// }
 </style>
\ No newline at end of file
diff --git a/src/pages/member/index.vue b/src/pages/member/index.vue
index 24a8a0c..d9ab0af 100644
--- a/src/pages/member/index.vue
+++ b/src/pages/member/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="wrap">
     <div class="reg">
-      {{ width }}
       <div class="equity-wrap">
         <div class="equity">
           <h6>
@@ -54,12 +53,10 @@ export default {
   data () {
     return {
       qrcodeVisible: false,
-      qrcodeTop: '100px',
-      width: 0
+      qrcodeTop: '100px'
     }
   },
   mounted () {
-    this.width = window.innerWidth
     const height = (window.innerHeight - 758) / 2
     this.qrcodeTop = (height > 0 ? height : 0) + 'px'
     new WOW().init()
@@ -200,54 +197,54 @@ export default {
         color: #fff;
     }
 }
-// @media (max-width: 1200px) {
-//     .reg {
-//         h6 {
-//             margin: 20px 0;
-//         }
-//         .equity-wrap {
-//             width: 90%;
-//             .equity {
-//                 padding: 0 20px;
-//             }
-//         }
-//         .step {
-//             flex-wrap: wrap;
-//             padding: 0 30px 0 50px;
-//             li {
-//                 width: 50%;
-//                 padding: 0;
-//                 &:first-child,
-//                 &:nth-child(2) {
-//                     margin-bottom: 10px;
-//                 }
-//             }
-//         }
-//         .member-des {
-//             margin-top: 20px;
-//         }
-//         .param {
-//             padding: 0;
-//             li {
-//                 width: 50%;
-//             }
-//         }
-//     }
-// }
-// @media (max-width: 640px) {
-//     .reg {
-//         .step {
-//             li {
-//                 width: 100%;
-//                 margin-bottom: 10px;
-//                 &:last-child {
-//                     margin-bottom: 0;
-//                 }
-//             }
-//         }
-//         .btn {
-//             width: 100%;
-//         }
-//     }
-// }
+@media (max-width: 1200px) {
+    .reg {
+        h6 {
+            margin: 20px 0;
+        }
+        .equity-wrap {
+            width: 90%;
+            .equity {
+                padding: 0 20px;
+            }
+        }
+        .step {
+            flex-wrap: wrap;
+            padding: 0 30px 0 50px;
+            li {
+                width: 50%;
+                padding: 0;
+                &:first-child,
+                &:nth-child(2) {
+                    margin-bottom: 10px;
+                }
+            }
+        }
+        .member-des {
+            margin-top: 20px;
+        }
+        .param {
+            padding: 0;
+            li {
+                width: 50%;
+            }
+        }
+    }
+}
+@media (max-width: 640px) {
+    .reg {
+        .step {
+            li {
+                width: 100%;
+                margin-bottom: 10px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+        .btn {
+            width: 100%;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
index 2697ead..5a5c451 100644
--- a/src/styles/page/page.scss
+++ b/src/styles/page/page.scss
@@ -131,91 +131,91 @@
     }
 }
 
-// @media (max-width: 1200px) {
-//     .wrap {
-//         .single-banner {
-//             .banner-img {
-//                 height: 35rem;
-//             }
-//             .texts {
-//                 top: 20rem;
-//                 left: 9rem;
-//             }
-//         }
-//     }
-//     .inner {
-//         width: 95%;
-//     }
-//     .tabs {
-//         overflow: hidden;
-//         overflow-x: auto;
-//         white-space: normal;
-//         justify-content: normal;
-//         display: -webkit-box;
-//         li {
-//             white-space: normal;
-//         }
-//     }
-// }
-// @media (max-width: 980px) {
-//     .wrap {
-//         .single-banner {
-//             .banner-img {
-//                 height: 25rem;
-//             }
-//             .texts {
-//                 top: 15rem;
-//                 left: 5rem;
-//             }
-//         }
-//     }
-//     .block {
-//         padding: 50px 0;
-//     }
-// }
-// @media (max-width: 768px) {
-//     .wrap {
-//         .single-banner {
-//             .banner-img {
-//                 height: 22rem;
-//             }
-//             .texts {
-//                 top: 12rem;
-//                 left: 5rem;
-//             }
-//         }
-//     }
+@media (max-width: 1200px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 35rem;
+            }
+            .texts {
+                top: 20rem;
+                left: 9rem;
+            }
+        }
+    }
+    .inner {
+        width: 95%;
+    }
+    .tabs {
+        overflow: hidden;
+        overflow-x: auto;
+        white-space: normal;
+        justify-content: normal;
+        display: -webkit-box;
+        li {
+            white-space: normal;
+        }
+    }
+}
+@media (max-width: 980px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 25rem;
+            }
+            .texts {
+                top: 15rem;
+                left: 5rem;
+            }
+        }
+    }
+    .block {
+        padding: 50px 0;
+    }
+}
+@media (max-width: 768px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 22rem;
+            }
+            .texts {
+                top: 12rem;
+                left: 5rem;
+            }
+        }
+    }
 
-//     .tabs {
-//         li {
-//             padding: 1rem 10px;
-//             margin: 0;
-//         }
-//     }
-// }
-// @media (max-width: 640px) {
-//     .wrap {
-//         .single-banner {
-//             .banner-img {
-//                 height: 18rem;
-//             }
-//             .texts {
-//                 top: 10rem;
-//                 left: 5rem;
-//             }
-//         }
-//     }
-// }
-// @media (max-width: 480px) {
-//     .wrap {
-//         .single-banner {
-//             .banner-img {
-//                 height: 15rem;
-//             }
-//             .texts {
-//                 top: 6rem;
-//                 left: 5rem;
-//             }
-//         }
-//     }
-// }
+    .tabs {
+        li {
+            padding: 1rem 10px;
+            margin: 0;
+        }
+    }
+}
+@media (max-width: 640px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 18rem;
+            }
+            .texts {
+                top: 10rem;
+                left: 5rem;
+            }
+        }
+    }
+}
+@media (max-width: 480px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 15rem;
+            }
+            .texts {
+                top: 6rem;
+                left: 5rem;
+            }
+        }
+    }
+}