<template>
  <div class="home-wrap column">
    <div class="home-main flex">
      <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>
import Footer from '@/components/Footer.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>
