dianshang-qianduan/src/views/index.vue

<template>
  <div class="content">
    <div class="title">
      <img src="@/assets/images/indexTopTitle.png" alt="" />
    </div>
    <div class="mainContent">
      <div class="leftContent">
        <div class="title1"></div>
        <div class="mainBox">
          <div class="busyApp">
            <img src="@/assets/images/101.png" alt="" />
            <div class="list">
              <li v-for="item in businessList" :key="item">{{ item }}</li>
            </div>
          </div>
          <div style="width: 100%; text-align: center; margin-top: 0px">
            <img
              src="@/assets/images/1箭头-上.png"
              alt=""
              style="width: 46px; height: 22px"
            />
          </div>
          <div class="title2"></div>
          <div class="bottomView">
            <div class="left">
              <div class="busyApp">
                <img src="@/assets/images/102.png" alt="" />
                <div class="listBlue">
                  <li v-for="item in previewTags" :key="item">{{ item }}</li>
                </div>
              </div>

              <img src="@/assets/images/2箭头-上.png" alt="" class="arrow" />

              <div class="busyApp" style="margin-top: -15px">
                <img src="@/assets/images/103.png" alt="" />
                <div class="listBlue">
                  <li v-for="item in modelTags" :key="item">{{ item }}</li>
                </div>
              </div>
              <img src="@/assets/images/3箭头-上.png" alt="" class="arrow" />
              <div class="busyApp" style="margin-top: -15px">
                <img src="@/assets/images/102.png" alt="" />
                <div class="listBlue">
                  <li v-for="item in previewTags" :key="item">{{ item }}</li>
                </div>
              </div>
              <img src="@/assets/images/4箭头-上.png" alt="" class="arrow" />
              <div class="busyApp" style="margin-top: -15px">
                <img src="@/assets/images/102.png" alt="" />
                <div class="listBlue">
                  <li v-for="item in previewTags" :key="item">{{ item }}</li>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="item">
                <span>预测算法</span>
                <div
                  style="
                    text-align: left;
                    padding-left: 8px;
                    padding-right: 5px;
                    padding-top: 6px;
                  "
                >
                  时间序列、逻辑回归、流失预警RFM...
                </div>
              </div>
              <div class="item">
                <span>机器学习</span>
                <div
                  style="
                    text-align: left;
                    padding-left: 8px;
                    padding-right: 5px;
                    padding-top: 6px;
                  "
                >
                  特征提取、特征选择预测优化...
                </div>
              </div>
              <div class="item">
                <span>推荐算法</span>
                <div
                  style="
                    text-align: left;
                    padding-left: 8px;
                    padding-right: 5px;
                    padding-top: 6px;
                  "
                >
                  APRIORI、协同过滤、基于内容的过滤...
                </div>
              </div>
              <div class="item">
                <span>相似度技术</span>
                <div
                  style="
                    text-align: left;
                    padding-left: 8px;
                    padding-right: 5px;
                    padding-top: 6px;
                  "
                >
                  欧式距离、皮尔逊相似度、余弦相似度...
                </div>
              </div>
              <div class="item">
                <span>聚类分类算法</span>
                <div
                  style="
                    text-align: left;
                    padding-left: 8px;
                    padding-right: 5px;
                    padding-top: 6px;
                  "
                >
                  KNN、贝叶斯网络、神经网络...
                </div>
              </div>
              <div class="item">
                <span>文本挖掘算法</span>
                <div
                  style="
                    text-align: left;
                    padding-left: 8px;
                    padding-right: 5px;
                    padding-top: 6px;
                  "
                >
                  TF-IDF、VSM、TEXTRANK...
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="threeArrow">
        <img src="@/assets/images/5箭头-右.png" alt="" />
      </div>
      <div class="marketJob">
        <div class="title"></div>
        <div class="content">
          <img src="@/assets/images/001.png" alt="" />
          <img src="@/assets/images/002.png" alt="" />
          <img src="@/assets/images/003.png" alt="" />
          <img src="@/assets/images/004.png" alt="" />
          <img src="@/assets/images/005.png" alt="" />
          <img src="@/assets/images/006.png" alt="" />
        </div>
      </div>
      <div class="portrait">
        <div class="title"></div>
        <div class="content">
          <img src="@/assets/images/3-01.png" alt="" />
          <div class="item">
            <span>营销业务能力</span>
          </div>
          <div class="item">
            <span>数字技术应用能力</span>
          </div>
          <div class="item">
            <span>数据处理分析能力</span>
          </div>
          <!-- <img src="@/assets/images/3-02.png" alt="" />
          <img src="@/assets/images/3-03.png" alt="" />
          <img src="@/assets/images/3-04.png" alt="" /> -->
        </div>
      </div>
      <div class="threeArrow">
        <img src="@/assets/images/5箭头-右.png" alt="" />
      </div>
      <div class="skill">
        <div class="title"></div>
        <div class="content">
          <div class="item">
            <span class="skillTitle">基础知识</span>
            <div
              style="padding-left: 25px; padding-right: 8px; padding-top: 6px"
            >
              经济学原理、管理学原理、微观经济学、数字经济概论
            </div>
          </div>
          <div class="item">
            <span class="skillTitle">营销专业知识</span>
            <div
              style="padding-left: 25px; padding-right: 8px; padding-top: 6px"
            >
              市场营销学、市场营销策划、市场调查与预测、消费者行为、网络营销、商务沟通与谈判、新媒体营销
            </div>
          </div>
          <div class="item">
            <span class="skillTitle">技术基础知识</span>
            <div
              style="padding-left: 25px; padding-right: 8px; padding-top: 6px"
            >
              计算机、SQL数据库、PYTHON程序设计、高等数学、统计学、线性代数、大数据导论、新媒体技术
            </div>
          </div>
          <div class="item">
            <span class="skillTitle">数字技术应用能力</span>
            <div
              style="padding-left: 25px; padding-right: 8px; padding-top: 6px"
            >
              人工智能、AIGC、大模型、大数据、区块链、物联网、虚拟现实
            </div>
          </div>
          <div class="item">
            <span class="skillTitle">数据处理分析技能</span>
            <div
              style="padding-left: 25px; padding-right: 20px; padding-top: 6px"
            >
              数据采集、数据预处理、特征工程、数据挖掘、数据可视化、商务智能BI
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const businessList = ref([
  "业务推送",
  "个性化推荐",
  "用户流失预警",
  "销售预测",
  "广告优化",
  "群体/个体画像分析",
  "精细化运营",
  "商品配置优化",
]);
const previewTags = ref([
  "人口属性",
  "人群属性",
  "用户流失",
  "消费能力",
  "违约概率",
  "用户近期需求",
]);
const modelTags = ref([
  "人口属性",
  "用户价值",
  "用户兴趣爱好",
  "产品购买偏好",
  "渠道使用偏好",
  "用户活跃度",
  "用户关联关系",
  "用户满意度",
  "用户风险评分",
]);
</script>

<style scoped lang="scss">
.content {
  color: #fff;
  border: 1px solid #0e295a;
  // background-color: #02112e;
  background-color: rgba(2, 17, 46, 0.3);
  // padding: 20px;
  padding-left: 45px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  .title {
    width: 884px;
    height: 45px;
    background-image: url("@/assets/images/top2.png");
    margin: 0 auto;
    text-align: center;
    img {
      width: 281px;
      height: 20px;
      // margin-top: 2px;
    }
  }
  .mainContent {
    display: flex;
    .leftContent {
      .title1 {
        width: 660px;
        height: 43px;
        background-image: url("@/assets/images/1-1.png");
        margin-bottom: 10px;
      }
      .mainBox {
        width: 660px;
        height: 736px;
        background-image: url("@/assets/images/1绿框.png");
        background-size: 660px 736px;
        .busyApp {
          display: flex;
          align-items: center;
          padding-left: 10px;
          padding-top: 5px;
          // width: 500px;
          .list {
            // display: flex;
            li {
              list-style: none;
              width: 113px;
              height: 34px;
              display: inline-block;
              font-size: 13px;
              background-image: url("@/assets/images/绿.png");
              text-align: center;
              line-height: 34px;
              margin-left: 15px;
              // margin-bottom: 10px;
            }
            li:nth-of-type(5) {
              margin-top: 10px;
            }
          }
          .listBlue {
            li {
              list-style: none;
              width: 113px;
              height: 34px;
              display: inline-block;
              font-size: 13px;
              background-image: url("@/assets/images/蓝.png");
              text-align: center;
              line-height: 34px;
              margin-left: 15px;
              // margin-bottom: 10px;
            }
            li:nth-of-type(5) {
              margin-top: 10px;
            }
            li:nth-of-type(7) {
              margin-top: 10px;
            }
          }
        }
        .title2 {
          width: 660px;
          height: 43px;
          background-image: url("@/assets/images/1-2.png");
          margin-top: 5px;
        }
        .bottomView {
          display: flex;
          align-items: center;
          .busyApp {
            display: flex;
            align-items: center;
            padding-left: 10px;
            padding-top: 5px;
            // width: 500px;
            .listBlue {
              // width: ;
              width: 369px;
              li {
                list-style: none;
                width: 113px;
                height: 34px;
                display: inline-block;
                font-size: 13px;
                background-image: url("@/assets/images/蓝.png");
                text-align: center;
                line-height: 34px;
                margin-left: 10px;
                // margin-bottom: 10px;
              }
              li:nth-of-type(5) {
                margin-top: 10px;
              }
            }
          }
          .arrow {
            margin-left: 249px;
          }
          .right {
            margin-left: 7px;
            width: 142px;
            height: 542px;
            background-image: url("@/assets/images/1-2绿框.png");
            background-size: 142px 542px;
            // padding: 10px;
            // padding-top: 10px;
            padding-left: 9px;
            .item {
              width: 124px;
              height: 85px;
              background-image: url("@/assets/images/小文字框.png");
              margin-top: 4px;
              background-size: 124px 85px;
              font-size: 13px;
              padding-top: 2px;
              text-align: center;
              span {
                // margin-left: 33px;
              }
            }
          }
        }
      }
    }
    .threeArrow {
      margin-top: 330px;
      margin-left: 5px;
    }
    .marketJob {
      margin-left: 5px;
      .title {
        background-image: url("@/assets/images/2-1.png");
        width: 204px;
        height: 43px;
        margin-bottom: 10px;
      }
      .content {
        width: 206px;
        height: 736px;
        background-image: url("@/assets/images/2篮框.png");
        background-size: 205px 735px;
        padding: 0;
        padding-left: 13px;
        padding-top: 40px;
        img {
          margin-bottom: 58px;
        }
      }
    }
    .portrait {
      margin-left: 40px;
      .title {
        background-image: url("@/assets/images/3-1.png");
        width: 204px;
        height: 43px;
        margin-bottom: 10px;
      }
      .content {
        width: 206px;
        height: 736px;
        background-image: url("@/assets/images/2篮框.png");
        background-size: 205px 735px;
        padding: 0;
        padding-left: 13px;
        padding-top: 10px;
        img {
          // margin-bottom: 58px;
        }
        img:nth-of-type(2),
        img:nth-of-type(4),
        img:nth-of-type(3) {
          height: 185px;
          margin-left: 10px;
        }
        .item:nth-of-type(1) {
          margin-left: 10px;
          width: 159px;
          height: 185px;
          background-image: url("@/assets/images/3-02.png");
          background-size: 159px 185px;
          padding-top: 140px;
          text-align: center;
          font-size: 14px;
        }
        .item:nth-of-type(2) {
          margin-left: 10px;
          width: 159px;
          height: 185px;
          background-image: url("@/assets/images/3-03.png");
          background-size: 159px 185px;
          padding-top: 140px;
          text-align: center;
          font-size: 14px;
        }
        .item:nth-of-type(3) {
          margin-left: 10px;
          width: 159px;
          height: 185px;
          background-image: url("@/assets/images/3-04.png");
          background-size: 159px 185px;
          padding-top: 140px;
          text-align: center;
          font-size: 14px;
        }
      }
    }
    .skill {
      margin-left: 10px;
      .title {
        background-image: url("@/assets/images/4-1.png");
        width: 319px;
        height: 43px;
        margin-bottom: 10px;
      }
      .content {
        width: 319px;
        height: 736px;
        background-image: url("@/assets/images/4紫框.png");
        background-size: 318px 735px;
        padding: 0;
        padding-left: 17px;
        padding-top: 10px;
        .item {
          font-size: 14px;
          width: 283px;
          height: 145px;
          background-image: url("@/assets/images/4-01.png");
          background-size: 283px 145px;
          padding-top: 16px;
          .skillTitle {
            margin-left: 15px;
          }
        }
        .item:nth-last-of-type(1) {
          width: 283px;
          height: 130px;
          background-image: url("@/assets/images/4-05.png");
          background-size: 283px 130px;
        }
      }
    }
  }
}
</style>