首页布局

src/assets/home/NEW.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="28.7998046875" height="8.533203125" viewBox="0 0 28.7998046875 8.533203125"><g><g><path d="M8.32491,0L6.19165,0L6.19165,5.09453L1.78205,0L0,0L0,8.53333L2.14627,8.53333L2.14627,3.59164L6.55587,8.53333L8.32491,8.53333L8.32491,0Z" fill="#FF2627" fill-opacity="1"/></g><g><path d="M16.13766625,6.72478L11.49392625,6.72478L11.49392625,5.12L15.72141625,5.12L15.72141625,3.41333L11.49392625,3.41333L11.49392625,1.80856L16.09863625,1.80856L16.09863625,0L9.34765625,0L9.34765625,8.53333L16.13766625,8.53333L16.13766625,6.72478Z" fill="#FF2627" fill-opacity="1"/></g><g><path d="M28.79599375,0L26.58469375,0L25.062763750000002,5.37473L23.56687375,0L21.524673749999998,0L20.02879375,5.37473L18.50689375,0L16.30859375,0L18.79306375,8.53333L21.08241375,8.53333L22.55228375,3.2605L24.00913375,8.53333L26.31149375,8.53333L28.79599375,0Z" fill="#FF2627" fill-opacity="1"/></g></g></svg>

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="header-wrap min-width">
+    <div class="header-wrap ">
         <div class="header-logo">
             <img src="../assets/header-logo.png" alt="">
         </div>

src/style/theme/common.scss

@@ -10,6 +10,9 @@ body {
         padding: 0;
     }
 }
+.ellipsis{
+    
+}
 .column{
     display: flex;
     flex-direction: column;

src/views/HomeView.vue

@@ -1,18 +1,611 @@
 <template>
-  <div class="home">
+  <div class="home-wrap column">
-    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
+    <div class="home-main flex">
-    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
+      <div class="home-main-left column">
+        <div class="systemNotice common-area">
+          <h2 class="flex-between">
+            <b>系统通知</b>
+            <span @click="lookMoreSystem">查看更多</span>
+          </h2>
+          <div class="systemNotice-main">
+            <div class="sales-item flex" v-for="(item) in systemList" :key="item.name">
+              <img :src="require(`@/assets/home/NEW.svg`)" alt="">
+              <div class="column">
+                <b>{{ item.label }}</b>
+                <p>{{ item.desc }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="salesStatistics common-area">
+          <h2 class="flex-between">
+            <b>销售统计 <span>2024–10-28数据</span></b>
+            <span @click="lookMoreSystem">查看全部</span>
+
+          </h2>
+          <div class="salesStatistics-main flex">
+            <div class="sales-item flex" v-for="(item, index) in salesList" :key="item.name">
+              <img :src="require(`@/assets/home/sales${index + 1}.png`)" alt="">
+              <div class="column">
+                <b>{{ item.num }} <span>元</span></b>
+                <span>{{ item.label }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="supplyPrice common-area">
+          <h2>供货价格 </h2>
+          <div class="supplyPrice-main flex">
+            <div :class="['supplyPric-item', 'supplyPric-item' + (index1 + 1)]" v-for="(item1, index1) in supplyList1"
+              :key="item1">
+              <div class="item-top flex-between">
+                <div class="flex">
+                  <img :src="require(`@/assets/home/supplyPrice${index1 + 1}.png`)" alt="">
+                  <b>{{ item1 }}</b>
+                </div>
+                <span>详情</span>
+              </div>
+              <div v-for="(item2, index2) in supplyList" :key="index2" class="item-list">
+                <p class="item-list-name">{{ item2.name }}</p>
+                <p class="flex-between" v-for="(item3, index3) in item2.list" :key="index3">
+                  {{ item3.name }}
+                  <span>{{ item3.price }}元/{{ item3.word }}</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Footer></Footer>
+
+      </div>
+      <div class="home-main-right">
+        <div class="accountBalance flex-between common-area">
+          <span>账户余额&nbsp; <b>4560</b>&nbsp;元</span>
+          <span>展开</span>
+        </div>
+        <div class="importantReminder common-area">
+          <h2>重要提醒</h2>
+          <div class="reminder1 column">
+            <p>淘宝账号即将过期</p>
+            <div @click="lookTaoBaoNum">查看</div>
+          </div>
+        </div>
+        <div class="carouselImage common-area">
+          <!-- 轮播图 -->
+           <img src="@/assets/home/home-right.png" alt="">
+        </div>
+        <div class="preferredMarket common-area">
+          <h2>优选营销</h2>
+          <div class="column">
+            <div class="sales-item flex" v-for="(item, index) in preferredMarketList" :key="item.name">
+              <img :src="require(`@/assets/home/preferredMarket${index + 1}.png`)" alt="">
+              <div class="column">
+                <span>{{ item.label }}</span>
+                <p>{{ item.desc }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="usageGuide common-area">
+          <h2 class="flex-between">
+            <b>使用指南</b>
+            <span>查看全部</span>
+          </h2>
+          <p>我想将商品绑定淘宝店应该怎么做？</p>
+          <p>基于成交量的推广支持</p>
+          <p>二级、裂变分销，发展代理网络</p>
+        </div>
+        <div class="customWrap common-area">
+          <h2>联系客服</h2>
+          <img src="@/assets/home/customer.png" alt="">
+        </div>
+
+      </div>
+    </div>
+
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
+import Footer from '@/components/Footer.vue';
-// import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'HomeView',
+  data() {
+    return {
+      preferredMarketList: [
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: '多端系统'
+        },
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: 'OCPC推广'
+        },
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: '多级分销'
+        },
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: '嵌入广告'
+        },
+        {
+          desc: '电脑版、小程序、微信H5',
+          label: '发放卡券'
+        },
+      ],
+      salesList: [
+        {
+          num: 4560,
+          label: '销售金额'
+        },
+        {
+          num: 1000,
+          label: '成本支出'
+        },
+        {
+          num: 20,
+          label: '查重订单量'
+        },
+        {
+          num: 60,
+          label: 'AIGC订单量'
+        },
+      ],
+      systemList: [
+        {
+          desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…',
+          label: 'AI范文整合的通知'
+        },
+        {
+          desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…',
+          label: 'AI范文整合的通知'
+        },
+      ],
+      supplyList1: [
+        '查重服务',
+        'AIGC服务',
+        '写作辅助',
+      ],
+      supplyList: [
+        {
+          name: '万方系统',
+          list: [
+            {
+              name: '万方硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+            {
+              name: '万方硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+            {
+              name: '万方硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+          ]
+
+        },
+        {
+          name: '维普系统',
+          list: [
+            {
+              name: '维普硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+            {
+              name: '维普系统硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+            {
+              name: '维普系统硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+          ]
+
+        },
+        {
+          name: 'PaperPass旗舰版',
+          list: [
+            {
+              name: '万方硕博版',
+              word: '千字符',
+              price: 2.4
+            },
+          ]
+
+        },
+        {
+          name: '学术不端',
+          list: [
+            {
+              name: '硕博预审版',
+              word: '篇',
+              price: 2.4
+            },
+            {
+              name: '期刊小论文小篇幅版',
+              word: '篇',
+              price: 2.4
+            },
+            {
+              name: '期刊小论文小篇幅版',
+              word: '篇',
+              price: 2.4
+            },
+            {
+              name: '期刊小论文小篇幅版',
+              word: '篇',
+              price: 2.4
+            },
+          ]
+
+        },
+      ]
+
+    }
+  },
   components: {
     // HelloWorld
+    Footer,
+  },
+  methods: {
+    lookTaoBaoNum() {
+      // 查看淘宝账号
+    },
+    lookMoreSystem() {
+      // 系统通知 -查看更多
+    },
+    lookAllSales() {
+      // 销售统计 -查看全部
+    },
   }
 }
 </script>
+<style scoped lang="scss">
+.home-wrap {
+  padding: 12px;
+
+  .home-main {
+    width: 100%;
+    display: flex;
+    /* 使用 flex 布局 */
+    gap: 12px;
+    /* 两个盒子之间的间隔 */
+    min-width: 1018px;
+    /* 父元素最小宽度 */
+    max-width: 1750px;
+    /* 父元素最大宽度 */
+    margin: 0 auto;
+    /* 水平居中 */
+    align-items: stretch;
+    // padding: 0 12px; /* 左右内边距，避免内容贴边 */
+    box-sizing: border-box;
+
+    /* 确保 padding 不会影响宽度计算 */
+    .home-main-left {
+      min-width: 746px;
+      max-width: 1398px;
+      flex: 1;
+
+      .common-area {
+        width: 100%;
+        padding: 20px 14px;
+        box-sizing: border-box;
+        /* 确保 padding 不会影响宽度计算 */
+        background: #fff;
+        margin-bottom: 12px;
+
+        h2 {
+          font-size: 16px;
+          font-weight: bold;
+          letter-spacing: 0.08em;
+          color: #1E2226;
+          margin: 0 0 20px 0;
+          text-align: left;
+
+          span {
+            font-size: 14px;
+            font-weight: normal;
+            letter-spacing: 0.08em;
+            color: #8A9099;
+          }
+        }
+      }
+
+      .systemNotice-main {
+        img {
+          width: 32px;
+          height: 32px;
+          margin-right: 8px;
+        }
+
+        .sales-item {
+          width: 100%;
+          justify-content: flex-start;
+          padding: 18px 12px;
+          box-sizing: border-box;
+
+          div {
+            width: calc(100% - 30px);
+          }
+
+          /* 确保 padding 不会影响宽度计算 */
+          b {
+            font-size: 14px;
+            font-weight: normal;
+            line-height: normal;
+            letter-spacing: 0.08em;
+            color: #1E2226;
+          }
+
+          p {
+            width: 100%;
+            margin-top: 6px;
+            overflow: hidden;
+            // display: -webkit-box;
+            // -webkit-line-clamp: 1;
+            /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
+            -webkit-box-orient: vertical;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-align: left;
+            color: #8A9099;
+          }
+        }
+
+      }
+
+      .salesStatistics-main {
+        img {
+          width: 54px;
+          height: 54px;
+          margin-right: 12px;
+        }
+
+        .sales-item {
+          width: 25%;
+          justify-content: flex-start;
+          padding: 14px 12px;
+        }
+      }
+
+      .supplyPrice-main {
+        display: flex;
+        /* 使用 flex 布局 */
+        gap: 20px;
+
+        .supplyPric-item {
+          padding: 20px 14px;
+          box-sizing: border-box;
+          color: #8A9099;
+          flex: 1;
+          border-radius: 4px;
+          transition: all .5s;
+          cursor: pointer;
+
+          .item-top {
+            border-bottom: 1px solid #EAECF0;
+            padding-bottom: 20px;
+
+            b {
+              color: #1E2226;
+            }
+
+            img {
+              width: 28px;
+              height: 28px;
+              margin-right: 12px;
+            }
+          }
+
+          .item-list {
+            margin-top: 16px;
+            text-align: left;
+            line-height: 18px;
+
+            p {
+              margin-bottom: 8px;
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+
+            .item-list-name {
+              margin-bottom: 8px;
+              color: #1E2226;
+            }
+          }
+        }
+
+        .supplyPric-item1 {
+
+          background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 17%, #FFFFFF 100%);
+          /* middle/middle_line_1 */
+          border: 1px solid #DFE2E6;
+
+          &:hover {
+            transition: all .5s;
+            background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 60%);
+          }
+        }
+
+        .supplyPric-item2 {
+          background: linear-gradient(180deg, #FFFAF6 1%, rgba(255, 255, 255, 0.6233) 14%);
+          /* middle/middle_line_1 */
+          border: 1px solid #DFE2E6;
+
+          &:hover {
+            transition: all .5s;
+            background: linear-gradient(180deg, #FFFAF6 0%, #FFFFFF 60%);
+          }
+        }
+
+        .supplyPric-item3 {
+          background: linear-gradient(180deg, #FFF6F6 0%, rgba(255, 255, 255, 0.8151) 14%, rgba(255, 255, 255, 0) 100%);
+          /* middle/middle_line_1 */
+          border: 1px solid #DFE2E6;
+
+          &:hover {
+            transition: all .5s;
+            background: linear-gradient(180deg, #FFF6F6 0%, #FFFFFF 60%);
+          }
+        }
+      }
+    }
+
+    .home-main-right {
+      flex: 0 0 auto;
+      /* 右边盒子不伸缩 */
+      min-width: 260px;
+      /* 右边盒子最小宽度 */
+      max-width: 328px;
+      /* 右边盒子最大宽度 */
+      width: 260px;
+
+      /* 在 1440px 屏幕下的固定宽度 */
+      .common-area {
+        background: #fff;
+        padding: 20px 12px;
+        text-align: left;
+        font-size: 14px;
+        line-height: normal;
+        letter-spacing: 0.08em;
+
+        /* text/text_1 */
+        h2 {
+          font-weight: bold;
+          margin: 0;
+          font-size: 16px;
+          color: #1E2226;
+          span{
+            font-size: 14px;
+            color: #8A9099;
+            font-weight: normal;
+          }
+        }
+      }
+
+      .accountBalance {
+        padding: 27px 14px;
+        margin-bottom: 12px;
+        align-items: baseline;
+
+        b {
+          font-family: D-DIN;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 27px;
+          letter-spacing: normal;
+          color: #1F2026;
+        }
+
+        span {
+          font-size: 14px;
+          font-weight: normal;
+          color: #8A9099;
+        }
+      }
+
+      .importantReminder {
+        .reminder1 {
+          border-radius: 4px;
+          background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
+          padding: 14px 8px;
+          margin-top: 20px;
+
+          div {
+            display: flex;
+            justify-content: flex-end;
+            color: #FF4D4F;
+            margin-top: 10px;
+            width: 100%;
+          }
+        }
+      }
+
+      .carouselImage{
+        padding-bottom: 0;
+        img{
+          width: 100%;
+        }
+      }
+
+      .preferredMarket {
+        h2 {
+          margin-bottom: 20px;
+        }
+
+        .sales-item {
+          padding: 12px 0;
+          color: #8A9099;
+          font-size: 12px;
+
+          span {
+            font-size: 14px;
+            color: #1F2026;
+          }
+        }
+
+        img {
+          width: 34px;
+          height: 34px;
+          margin-right: 10px;
+        }
+      }
+
+      .customWrap {
+        img {
+          /* 自动布局子元素 */
+          width: 106px;
+          height: 106px;
+          z-index: 0;
+        }
+      }
+      .usageGuide{
+        h2{
+          margin-bottom: 20px;
+        }
+        p{
+          margin-bottom: 10px;
+          &:last-child{
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1440px) {
+  .home-main-right {
+    transition: all .3s;
+    width: 286px !important;
+    /* 在 1440px 屏幕下的固定宽度 */
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .home-main-right {
+    transition: all .3s;
+    width: 260px !important;
+    /* 在 1440px 屏幕下的固定宽度 */
+  }
+}
+
+@media screen and (min-width: 1441px) {
+  .home-main-right {
+    transition: all .3s;
+    width: 328px !important;
+    /* 在大于 1440px 屏幕下的最大宽度 */
+  }
+}
+</style>