<template>

  <div class="home">
    <div id="app">
      <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    </div>
    <div class="head w">
      <img src="@/assets/yw/logo.png" alt="">
      <ul>
        <li><a href="">首页</a></li>
        <li>|</li>
        <li><a href="#service">付费咨询</a></li>
        <li>|</li>
        <li><a href="#user">关于我们</a></li>
        <li>|</li>
        <li><a href="#contact">联系我们</a></li>
      </ul>
    </div>
    <div class="banner">
      <img src="@/assets/yw/banner.png" alt="">
    </div>
    <div class="content w">
      <!-- 付费 -->
      <a name="service"></a>
      <div>
        <div class="contactHead">
          <span class="title">付费资讯</span>
          <span class="english">Paid information</span>
        </div>
        <div class="conSubject clearfix">
          <div class="w588 left">
            <div @click="seeNew_1">
              <img class="w100pre" src="@/assets/yw/01-1.png" alt="">
              <p>互联网的核心技术为何是最大命门？</p>
              <span class="time">2021-03-24 09:12:31</span>
              <span class="explain">所有的陈旧观念都处于风雨飘摇之中，互联网改变一切的时代正在悄然揭开帷幕。 近五年来，在您熟悉的相关技术领域，我国有哪些发展？一些重要领域都已经...</span>
              <img class="w200" src="@/assets/service_btn.png" alt="" @click="hPay">
            </div>
          </div>
          <div class="w582 right">
            <div @click="seeNew_2">
              <img class="w210" src="@/assets/yw/02-1.png" alt="" style="height:100%">
              <div class="introduce">
                <p>“加油”的猫腻，如何更省钱？</p>
                <span class="time">2021-04-07 13:10:12</span>
                <span class="explain">现在油价越来越贵，但是路还得跑，油还得加，养 成良好的加油习惯，能帮你省下不小的费用环...</span>
              </div>
            </div>
            <div @click="seeNew_3">
              <img class="w210" src="@/assets/yw/03-1.png" alt="" style="height:100%">
              <div class="introduce">
                <p>什么是信息？探索信息本质</p>
                <span class="time">2019-08-29 13:25:59</span>
                <span class="explain">科学家曾经对数百万粒子组成的流体进行模拟，要 想计算出它是如何流动的，计算机只需遵循一...</span>
              </div>
            </div>
            <div @click="seeNew_4">
              <img class="w210" src="@/assets/yw/04-1.png" alt="" style="height:100%">
              <div class="introduce">
                <p>科技的下一个十年</p>
                <span class="time">2019-09-02 16:33:14</span>
                <span class="explain">首先，将科技创新融入文化产业，充分发挥政府的 引导服务功能，激发科技人才的创新活力，在...</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 关于我们 -->
      <a name="user"></a>
      <div>
        <div class="contactHead">
          <span class="title">关于我们</span>
          <span class="english">About us</span>
        </div>
        <div class="conUser clearfix">
          <div class="w588 left">
            <img class="w100pre" src="@/assets/yw/gongsi.png" alt="">
          </div>
          <div class="w582 right">
            <p>北京游来有旺(北京)科技有限责任公司</p>
            <div>
              游来有旺(北京)科技有限责任公司成立于2022年，主要成员及员工来自互联网上市公司。主要经营范围有:电子商务类互联网项目、互联网科技产品开发、互联网支付业务、计算机技术服务、大数据分析技术服务等。公司自主研发虚拟充值平台，并向各大企事业单位、组织、个人以及社会团体提供一站式跨品类弹性福利及商务服务解决方案，助力企事业单位优化员工福利品质，降低采购以及人力成本。我们以诚信、实力和高质量得到行业内的高度认可，以“客户第一"的经营理念为客户提供优质的服务。运营研发团队云集了国内相关领域的顶尖高手，研发水平达到国内领先水平。
            </div>
          </div>
        </div>
      </div>
      <!-- 联系我们 -->
      <a name="contact"></a>
      <div>
        <div class="contactHead">
          <span class="title">联系我们</span>
          <span class="english">contact us</span>
        </div>
        <ul class="conContact">
          <li>
            <div>
              <img src="@/assets/contact_1@2x.png" alt="">
            </div>
            <span>联系电话:010-84845085</span>
          </li>
          <li>
            <div>
              <img src="@/assets/contact_2@2x.png" alt="">
            </div>
            <span>电子邮箱：442100108@qq.com</span>
          </li>
          <li>
            <div>
              <img src="@/assets/contact_3@2x.png" alt="">
            </div>
            <span>公司地址：北京市朝阳区北苑东路19号院2号楼3层309</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="foot">
      <a href="https://beian.miit.gov.cn/">京ICP备2022025002号-1</a>
    </div>
    <!-- 弹层 -->
    <pay-page :dialogVisible="dialogVisible" @close="hClose" :new="dialogNew"></pay-page>
  </div>
</template>

<script>
// 弹层
import PayPage from '@/components/pay'
export default {
  name: 'home',
  components: { PayPage },
  data () {
    return {
      dialogVisible: false,
      dialogNew: ''
    }
  },
  methods: {
    hPay () {
      this.dialogVisible = true
    },
    hClose (val) {
      this.dialogVisible = val
    },
    seeNew_1 () {
      if (this.$store.state.seeNew_1) {
        this.$router.push('/New_1')
      } else {
        this.dialogVisible = true
        this.dialogNew = '/New_1'
      }
    },
    seeNew_2 () {
      if (this.$store.state.seeNew_2) {
        this.$router.push('/New_2')
      } else {
        this.dialogVisible = true
        this.dialogNew = '/New_2'
      }
    },
    seeNew_3 () {
      if (this.$store.state.seeNew_3) {
        this.$router.push('/New_3')
      } else {
        this.dialogVisible = true
        this.dialogNew = '/New_3'
      }
    },
    seeNew_4 () {
      if (this.$store.state.seeNew_4) {
        this.$router.push('/New_4')
      } else {
        this.dialogVisible = true
        this.dialogNew = '/New_4'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
}
.head {
  ul{
    display: inline-block;
    li {
      margin-right: 30px;
      font-size: 18px;
    }
    li:nth-child(odd):hover {
      border-bottom: 6px solid #5485FF;
    }
  }
}
.banner {
  margin-top: 6px;
  img {
    width: 100%;
  }
}
.content>div {
  margin-top: 40px;
}
.english {
  font-size: 16px;
  color: #999999;
  display: block;
}
.title {
  font-size: 22px;
  font-weight: bold;
  color: #333333;
}
.conSubject {
  margin-top: 20px;
  &>div {
    // display: inline-block;
    float: left;
    height: 400px;
  }
  & .left {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  span {
    display: block;
    font-size: 16px;
    // margin-bottom: 20px;
  }
  .time {
    color: #999999;
    margin-bottom: 5px;
  }
  .explain {
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  p {
    font-size: 22px;
    color: #333;
    margin-top: 10px;
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &>div:last-child {
      margin-bottom: 0;
    }
    .introduce {
      float: right;
      width: 352px;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    img {
      margin-right: 20px;
      vertical-align: top;
    }
    span {
      margin-bottom: 0;
    }
  }
}
.conUser {
  margin-top:20px;
  &>div {
    float: left;
  }
  .left {
    margin-right: 20px;
  }
  p {
    font-size: 22px;
    color: #333;
    margin: 30px 0;
  }
}
.conContact {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  li {
    div {
      text-align: center;
      margin-bottom: 20px;
    }
    img {
      width: 32px;
    }
    span {
      // font-size: 22px;
      font-size: 18px;
      color: #666;
    }
  }
}
</style>
