bocai_supplyChain_pc/src/components/main/index.vue

<template>
  <!-- 首页页面 -->
  <div class="main-container">
    <div class="bgimg">
      <a-carousel :autoplay="true" effect="fade" :dots="false" ref="scrollimg">
        <img :src="item" alt v-for="(item, index) in imglist" :key="index" />
      </a-carousel>
      <div class="middleslogan" :style="{ opacity: isshow ? '1' : '0' }">
        <!-- </i> -->
        <i class="iconfont" style="margin-bottom: 20px">
          <img src="http://matripe.oss-cn-beijing.aliyuncs.com/bcSVG/zzlogo.png" style="width: 140px !important; height: 70px; margin-bottom: 30px" alt />
        </i>

        <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
        <!-- <p style="font-size:90px;color:white">一个专门服务代理的平台</p> -->
        <div v-if="isLogin">
          <router-link to="/list" style="display: inline-block; width: 100%">进入稻田</router-link>
        </div>
        <div v-else>
          <router-link to="/list" style="display: inline-block; width: 100%">登录</router-link>
        </div>
      </div>
      <div id="toAboutBill" style="height: 84px; width: 1200px; position: absolute; bottom: 0;display:none"></div>
    </div>
    <div class="navigationBar" ref="navigationBar" id="navigationBar" style="display:none">
      <!-- <ul>
				<li @click="toTargetLocation('aboutBill')">关于稻田</li>
				<li @click="toTargetLocation('cooperativeBrand')">合作品牌</li>
				<li @click="toTargetLocation('businessLandscape')">业务版图</li>
				<li @click="toTargetLocation('relationUs')">联系我们</li>
      </ul>-->
      <a-anchor @click.prevent :affix="true">
        <a-anchor-link href="#toAboutBill" title="关于稻田" />
        <a-anchor-link href="#cooperativeBrand" title="合作品牌" />
        <a-anchor-link href="#businessLandscape" title="业务版图" />
        <a-anchor-link href="#relationUs" title="联系我们" />
      </a-anchor>
    </div>

    <div class="aboutBill" id="aboutBill" style="display:none">
      <div class="w">
        <div class="title">关于稻田</div>
        <div class="content">
          <p>伯才稻田，隶属郑州伯才科技有限公司，是一个专门服务同业合作伙伴的综合平台——一个专门服务代理的平台。平台为合作伙伴提供交付全流程的产品和服务，是伯才供应链产品矩阵中的旗舰产品。平台通过直签、联合派遣和战略合作等方式，严选上线项目，深度介入服务的每一个环节，为合作伙伴的顺利交付保驾护航。</p>
          <p>郑州伯才科技有限公司的前身为北京矩阵动力科技有限公司，项目于2015年5月在郑州启动，并于2016年5月在北京正式注册公司，开始商业化运作。伯才科技旗下有郑州伯才人力资源服务有限公司、江西人海企业管理有限公司等多家企业服务业务公司。</p>
          <p>公司2021年启用全新品牌——伯才。“新品牌、新里程”，品牌升级，但初心不变，伯才团队以崭新的面貌继续全心全意服务老乡、成就伙伴。</p>
        </div>
      </div>
    </div>
    <div class="cooperativeBrand" id="cooperativeBrand" style="display:none">
      <div class="w">
        <div class="title">合作品牌</div>
        <div class="content">
          <ul class="clearfix">
            <li v-for="item in cooperativeImg" :key="item">
              <img :src="`../../../${item}`" alt />
            </li>
          </ul>
          <span style="float: right; font-size: 14px; line-height: 20px; margin-top: 16px">* 部分合作品牌展示</span>
        </div>
      </div>
    </div>
    <div class="businessLandscape" id="businessLandscape" style="display:none">
      <div class="w">
        <div class="title">业务版图</div>
        <div class="content">
          <div class="left">
            <p>伯才合作项目</p>

            <p>触达城市100+</p>
            <p>辐射18个省及直辖市</p>
            <p>覆盖华东、华南、华中、华北、西南、西北6大区域</p>
          </div>
          <div class="right">
            <img src="http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/map.svg" alt />
          </div>
        </div>
      </div>
    </div>
    <div class="relationUs" id="relationUs" style="display:none">
      <div class="w">
        <div class="title">联系我们</div>
        <div class="content">
          <div class="left">
            <p>总部地址：河南省郑州市郑东新区升龙广场2号楼A座</p>
            <!-- <p>接待地址：河南省郑州市航空港区相州街29-60号</p> -->
            <p>联系电话：0371-6611 3723</p>
          </div>
          <div class="right">
            <span>
              <img src="http://matripe.oss-cn-beijing.aliyuncs.com/bcSVG/bcdtgzh.jpg" style="width: 100px" alt />
              <p>伯才稻田公众号</p>
            </span>
            <span>
              <img src="http://matripe.oss-cn-beijing.aliyuncs.com/bcSVG/bcdtxcx.jpg" style="width: 100px" alt />
              <p>伯才稻田小程序</p>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="banner">
			<div class="w">
				<i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
			</div>
    </div>-->
    <footer>
      <div class="w">
        <!-- <ul>
					<li @click="totop"><router-link to="/list">一手职位</router-link></li>
					<li></li>
					<li @click="totop">
						<router-link to="/serviceoutlets">服务网点</router-link>
					</li>
					<li></li>
					<li @click="totop">
						<router-link to="/aboutus">关于我们</router-link>
					</li>
        </ul>-->
        <div>
          Copyright © 2015 - 2022 Bocai. All Rights Reserved.
          <i></i>
          <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">豫ICP备2023001993号</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import Vue from 'vue'
import Cookies from 'js-cookie'
const path = require('path')
const files = require.context('../../../static/img', false, /.png$/)

// const modules = {}

console.dir(Vue)
export default {
  // 组件名称
  name: 'Main',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      isshow: false,
      imglist: ['http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/newBanner/banner1.webp', 'http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/newBanner/banner2.webp', 'http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/newBanner/banner3.webp'],
      cooperativeImg: [],
      isLogin: false,
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (localStorage.getItem('LOGIN_DATA')) {
      this.isLogin = true
    }
    setTimeout(() => {
      this.isshow = true
    }, 500)
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.getCooperativeImg()
    // console.log(navigationBar);
  },
  // 组件方法
  methods: {
    changeStyle(e) {
      console.log(e)
      console.log(1)
    },

    getCooperativeImg() {
      files.keys().forEach((key) => {
        const names = path.basename(key, '.png') //返回文件名 不含后缀名
        let content = files(key).default || files(key)
        if (names.indexOf('imgList') != -1 && names.substr(names.length - 1, 1) == '1') {
          this.cooperativeImg.push(content)
        }
      })
    },
    // toTargetLocation(target) {
    // 	// console.log(123);
    // 	const now = window.scrollY;
    // 	// 2. 目标位置（文章信息区域的高度）
    // 	const dist = document.getElementById(target).getBoundingClientRect().top;
    // 	console.log(dist);
    // 	animate({
    // 		from: now, // 当前的位置
    // 		to: dist, // 目标位置
    // 		onUpdate: (latest) => window.scrollTo(0, latest),
    // 	});
    // },
    totop() {
      // console.log(window);
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      // window.body.scrollY = 0;
    },
  },
}
</script>

<style scoped lang="less">
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.main-container {
  overflow: hidden;
  .bgimg {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: calc(100%);
    // height: 100%;
    // background: url("../../assets/banner1.png") no-repeat center;
    img {
      width: 100% !important;
      height: calc(100vh - 40px);
    }
    .middleslogan {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      top: 45%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      color: #fff;
      z-index: 99;
      transition: all 1.5s;
      p {
        text-align: center;
        font-weight: 100;
        width: 1200px;
        letter-spacing: 10px;
      }
      i {
        text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
      }
      i:nth-of-type(1) {
        font-size: 24px;
        margin-bottom: 30px;
      }
      i:nth-of-type(2) {
        font-size: 64px;
        line-height: 1;
      }
      div {
        width: 100px;
        height: 32px;
        margin-top: 115px;
        font-size: 14px;
        line-height: 29px;
        text-align: center;
        border-radius: 999px;
        cursor: pointer;
        color: #fff;
        border: 1px solid #fff;
        text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
        background-color: rgba(255, 255, 255, 0);
        transition: all 0.3s;
        &:hover {
          // background-color: rgba(255, 255, 255, 0.3);
          background-color: #ff4400;
          border-color: transparent;
        }
      }
    }
    .bottominfo {
      position: absolute;
      bottom: 40px;
      left: 50%;
      font-size: 14px;
      transform: translateX(-50%);
      color: #fff;
    }
  }
  /deep/ .navigationBar {
    overflow: hidden;
    width: 1200px;
    height: 84px;
    position: absolute;
    bottom: 0;
    left: 50%;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    transform: translateX(-50%);
    transition: all 0.2s;
    z-index: 999;
    .ant-anchor {
      display: flex;
      height: 84px;
      margin: 0 auto;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      > div {
        margin: 0 52px;
        font-size: 16px;
      }
      .ant-anchor-link-active > .ant-anchor-link-title {
        color: #ff4400;
      }
      .ant-anchor-ink {
        display: none;
      }
    }
  }
  .aboutBill,
  .cooperativeBrand,
  .businessLandscape,
  .relationUs {
    padding-top: 25px;
    padding-bottom: 70px;
    background-color: #fff;
    .title {
      position: relative;
      text-align: center;
      font-size: 24px;
      line-height: 33px;
      padding-bottom: 12px;
      &:after {
        content: '';
        display: block;
        width: 30px;
        height: 2px;
        position: absolute;
        background-color: #ff4400;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .content {
      margin-top: 50px;
      font-size: 18px;
      line-height: 40px;
      > p {
        text-indent: 2em;
        margin-bottom: 20px;
      }
    }
  }
  .cooperativeBrand {
    padding-top: 100px;
    // padding-bottom: 96px;
    height: 740px;
    background: url('http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/cooperativeBrandBg.webp') no-repeat 100%;
    .content {
      ul {
        li {
          float: left;
          width: 186px;
          height: 88px;
          margin-top: 16px;
          border-radius: 8px;
          transition: all 0.2s;
          &:not(li:nth-child(6n)) {
            margin-right: 16px;
          }

          &:hover {
            background-color: rgba(254, 254, 254, 0.3);
            box-shadow: 0px 0px 12px 3px #ddd;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .businessLandscape {
    .title {
      margin-top: 80px;
    }
    .content {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        p {
          line-height: 28px;
          font-size: 16px;
          color: #666;
        }
        p:first-child {
          margin-bottom: 24px;
          font-size: 20px;
          color: #333;
        }
      }
    }
  }
  .relationUs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: unset;
    height: 445px;
    background: url('http://matripe.oss-cn-beijing.aliyuncs.com/yishoudan/relationUsBg.webp') no-repeat 100% 100%;
    // padding-bottom: 126px;

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 72px;
      .left {
        // display: flex;
      }
      .right {
        display: flex;
        justify-content: space-around;
        > span {
          text-align: center;
          margin-right: 36px;
          p {
            font-size: 14px;
          }
        }
      }
    }
  }
  .banner {
    height: 72px;
    // margin-top: 20px;
    background-color: #ff4400;
    margin-bottom: -20px;
    .w {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      i {
        font-size: 32px;
        color: #fff;
      }
      img:last-child {
        width: 173px;
        height: 42px;
        margin-right: 110px;
      }
    }
    // background-color: black;
  }
  footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 40px 30px;
    margin-top: 20px;
    .w {
      ul {
        display: flex;
        justify-content: center;
        li {
          font-size: 16px;
          text-align: center;
          color: #4d575e;
          line-height: 25px;
        }
        li:nth-of-type(2n) {
          width: 1px;
          height: 20px;
          margin: 5px 54px;
          background-color: #4d575e;
        }
      }
      div {
        text-align: center;
        // margin-top: 16px;
        // color: #4d575e;
        color: #fff;
        font-size: 12px;
        i {
          display: inline-block;
          vertical-align: middle;
          width: 1px;
          height: 16px;
          margin: 0 10px;
          background-color: #4d575e;
        }
      }
    }
  }
}
</style>