Skip to content

P
penganfangniujie
Commit 7a1e2b49 authored by 张巧娟's avatar 张巧娟
Browse files
Options

add pages

parents
Pipeline #267 canceled with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 1032 additions and 0 deletions
      page/index.css 0 → 100644
      View file @ 7a1e2b49
      body {
      margin: 0;
      background-color: #F0F0F0;
      }
      .video-box {
      display: flex;
      }
      .video-style {
      width: 100%;
      }
      .full-box {
      width: 100%;
      /* height: 7.54rem; */
      /* overflow: hidden; */
      /* background-color: #EDEDED; */
      /* background: url(img/1.png) center center no-repeat;
      background-size: cover; */
      position: relative;
      }
      .full-img {
      width: 100%;
      }
      @-webkit-keyframes moveFromTop {
      from {
      -webkit-transform: translateY(-200%);
      }
      }
      @keyframes moveFromTop {
      from {
      -webkit-transform: translateY(-200%);
      transform: translateY(-200%);
      }
      }
      .xc-btn-box {
      width: 1.5rem;
      height: 0.7rem;
      color: #F0F0F0;
      font-size: 0.28rem;
      text-align: center;
      line-height: 0.7rem;
      background: url(img/xc-bg.png) center center no-repeat;
      background-size: cover;
      position: absolute;
      top: 75%;
      right: 0;
      z-index: 999;
      -webkit-animation: moveFromTop 1s ease both;
      animation: moveFromTop 1s ease both;
      }
      /* .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
      }
      .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
      } */
      .el-carousel__indicators--outside {
      display: none;
      }
      .el-carousel__mask {
      opacity: .4;
      }
      .active-item {
      background-color: #fff;
      }
      .active-img-box {
      width: 5rem;
      height: 2.9rem;
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      position: relative;
      }
      .active-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      }
      .border-img {
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
      }
      .text-box {
      color: #656565;
      font-size: 0.22rem;
      background-color: #fff;
      border-radius: 0 0 10px 10px;
      padding: 0 0.3rem;
      }
      .text-box h6 {
      color: #313131;
      font-size: 0.3rem;
      margin: 0.36rem 0 0.2rem 0;
      }
      .text-box p {
      margin: 0;
      line-height: 0.3rem;
      padding-bottom: 0.2rem;
      }
      .banner-box {
      padding: 0 0.2rem;
      }
      .banner-img-box {
      width: 100%;
      height: 3.2rem;
      }
      .xc-box-1 {
      position: relative;
      }
      .xc-title-box {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      }
      .xc-title-img {
      width: 100%;
      }
      .xc-box {
      margin: 0 0.2rem;
      background: #FFFFFF;
      border-radius: 10px;
      padding: 0.66rem 0.38rem 1rem 0.38rem;
      /* background: url('img/xc-box-bg.png') center no-repeat; */
      /* background-size: cover; */
      }
      .xc-box-1-bg {
      }
      .xc-tip {
      color: #C42C2D;
      font-size: 0.32rem;
      font-weight: bold;
      }
      .sc-tip-img {
      width: 0.58rem;
      height: 0.5rem;
      overflow: hidden;
      background: url('img/title-icon.png') center no-repeat;
      background-size: cover;
      display: inline-block;
      margin-right: 0.1rem;
      vertical-align: bottom;
      }
      .xc-item {
      color: #656565;
      font-size: 0.24rem;
      line-height: 0.4rem;
      padding: 0.2rem 0;
      }
      .xc-item-tip {
      color: #313131;
      font-weight: bold;
      padding-bottom: 0.2rem;
      }
      .item-tip-icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #C42C2D;
      border-radius: 50%;
      margin-right: 0.1rem;
      vertical-align: middle;
      }
      .xc-item-text {
      padding-left: 0.3rem;
      }
      .link-img {
      width: 5.5rem;
      height: 0.86rem;
      margin: 0 auto;
      background: url('img/line.png') center no-repeat;
      background-size: cover;
      position: absolute;
      margin-left: -2.75rem;
      left: 50%;
      z-index: 999;
      top: -0.27rem;
      }
      .link-img-box {
      position: relative;
      width: 100%;
      height: 0.32rem;
      }
      .bottom-bg-box {
      position: relative;
      }
      .niu2-img{
      width: 100%;
      height: 6.6rem;
      position: absolute;
      top: -2.2rem;
      }
      .niu2-img img {
      width: 100%;
      }
      .el-message-box {
      width: 6rem !important;
      height: 4.6rem !important;
      font-size: 0.32rem !important;
      }
      .el-message-box__header {
      padding: 0.6rem 0 0 !important;
      }
      .el-message-box__content {
      font-size: 32px !important;
      padding: 0 0.6rem !important;
      }
      .el-message-box__container {
      color: #313131 !important;
      font-weight: bold !important;
      }
      .el-message-box__input {
      padding-top: 0.24rem !important;
      }
      .el-input{
      font-size: 0.32rem !important;
      }
      .el-input__inner {
      height: 0.8rem !important;
      }
      .el-message-box__errormsg {
      font-size: 0.28rem !important;
      }
      .el-message-box__btns {
      padding: 1rem 0.6rem 0 !important;
      }
      .el-button--small {
      padding: 0.26rem 0.5rem !important;
      }
      .el-button--small {
      font-size: 0.32rem !important;
      border-radius: 10px !important;
      }
      .el-button--primary {
      background: #C42C2D !important;
      border: 1px solid #D2D2D2 !important;
      }
      \ No newline at end of file
      page/index.html 0 → 100644
      View file @ 7a1e2b49
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <title>蓬安风貌</title>
      <link rel="stylesheet" href="index.css">
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <script>
      // rem单位换算
      (function (doc, win) {
      var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
      docEl.style.fontSize = '100px';
      } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      // 利用rem布局，根据公式
      // html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度
      // 计算html元素的font-size,使1rem等于100px,方便快速开发
      }
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
      </script>
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      </head>
      <body>
      <div id="app">
      <!-- 视频 -->
      <div class="video-box">
      <video width="100%" controls>
      <source src="img/666.mp4" type="video/mp4">
      <!-- <source src="movie.ogg" type="video/ogg"> -->
      您的浏览器不支持Video标签。
      </video>
      </div>
      <!-- 百牛渡江 天下奇观 -->
      <div class="full-box">
      <img src="img/1.png" alt="" srcset="" class="full-img">
      </div>
      <div class="xc-btn-box" id="xcBtn" v-on:click="seeXc">
      行程查询
      </div>
      <!-- 卡片加文字 走马灯 -->
      <div>
      <el-carousel :interval="2000" type="card" height="530px">
      <!-- <el-carousel-item v-for="item in activeAttr" :key="item"> -->
      <el-carousel-item>
      <div class="active-item">
      <div class="active-img-box">
      <img src="img/2-1.png" alt="" srcset="" class="active-img">
      <img src="img/border-img.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="mask-div"></div>
      <div class="active-item">
      <div class="active-img-box">
      <img src="img/2-2.png" alt="" srcset="" class="active-img">
      <img src="img/border-img.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="mask-div"></div>
      <div class="active-item">
      <div class="active-img-box">
      <img src="img/2-3.png" alt="" srcset="" class="active-img">
      <img src="img/border-img.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="mask-div"></div>
      <div class="active-item">
      <div class="active-img-box">
      <img src="img/2-4.png" alt="" srcset="" class="active-img">
      <img src="img/border-img.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="mask-div"></div>
      <div class="active-item">
      <div class="active-img-box">
      <img src="img/2-5.png" alt="" srcset="" class="active-img">
      <img src="img/border-img.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      </el-carousel>
      </div>
      <!-- 轮播 -->
      <div class="banner-box">
      <el-carousel indicator-position="outside" height="564px">
      <el-carousel-item>
      <div class="active-item">
      <div class="active-img-box banner-img-box">
      <img src="img/3-1.png" alt="" srcset="" class="active-img">
      <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="active-item">
      <div class="active-img-box banner-img-box">
      <img src="img/3-2.png" alt="" srcset="" class="active-img">
      <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="active-item">
      <div class="active-img-box banner-img-box">
      <img src="img/3-3.png" alt="" srcset="" class="active-img">
      <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="active-item">
      <div class="active-img-box banner-img-box">
      <img src="img/3-4.png" alt="" srcset="" class="active-img">
      <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="active-item">
      <div class="active-img-box banner-img-box">
      <img src="img/3-5.png" alt="" srcset="" class="active-img">
      <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      <el-carousel-item>
      <div class="active-item">
      <div class="active-img-box banner-img-box">
      <img src="img/3-6.png" alt="" srcset="" class="active-img">
      <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
      </div>
      <div class="text-box">
      <h6>放牛节仪式</h6>
      <p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
      </div>
      </div>
      </el-carousel-item>
      </el-carousel>
      </div>
      <!-- 行程 -->
      <div class="xc-box-1">
      <div class="xc-title-box">
      <img src="img/xc-title.png" alt="" srcset="" class="xc-title-img">
      </div>
      <div style="padding-top: 1rem;">
      <div class="xc-box xc-box-1-bg">
      <div class="xc-tip">
      <div class="sc-tip-img"></div>
      <span>4.29行程（星期四）</span>
      </div>
      <div class="xc-item" v-for="item in xcAttr1" :key="index">
      <div class="xc-item-tip">
      <span class="item-tip-icon"></span>
      <span>{{item.title}}</span>
      </div>
      <!-- <div class="xc-item-text">{{item.text}}</div> -->
      </div>
      </div>
      </div>
      </div>
      <div class="link-img-box">
      <div class="link-img"></div>
      </div>
      <div class="xc-box-2">
      <div class="xc-box">
      <div class="xc-tip">
      <div class="sc-tip-img"></div>
      <span>5.30行程（星期五）</span>
      </div>
      <div class="xc-item" v-for="item in xcAttr1" :key="index">
      <div class="xc-item-tip">
      <span class="item-tip-icon"></span>
      <span>{{item.title}}</span>
      </div>
      <!-- <div class="xc-item-text">{{item.text}}</div> -->
      </div>
      </div>
      </div>
      <div class="bottom-bg-box">
      <div class="niu2-img">
      <img src="img/2niu.png" alt="" srcset="">
      </div>
      </div>
      </div>
      </body>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
      window.οnscrοll = function () {
      console.log(document.body.scrollTop)
      var top1 = document.body.scrollTop;
      var dom = document.getElementById("#xcBtn")
      if (top1 >= 300) {
      dom.style.position = "absolute";
      dom.style.top = top1 + 'px'; //300为div初始位置，当滚动条距离顶部的距离大于300时，使div与滚动条保持相同高度
      } else
      // document.getElementById("#xcBtn").css("position", "absolute").css("top", 300);
      dom.style.position = "absolute";
      dom.style.top = '300px';
      }
      </script>
      <script>
      // import img_url from 'img/2-1.png'
      new Vue({
      el: '#app',
      data: function () {
      return {
      visible: false,
      xcAttr1: [{
      title: '15:00—18:00 报到入住',
      text: ''
      },
      {
      title: '18:00 欢迎晚宴',
      text: '。'
      },
      {
      title: '19:30 出发前往相如故古城',
      text: '在（）酒店楼下集合乘坐（）号车前往相如故城，车程约30分钟（根据酒店位置确定）。'
      },
      {
      title: '20:00 夜游故城',
      text: '相如故城观光影，时长约50分钟'
      },
      {
      title: '20:50 出发前往百牛渡江',
      text: '在相如故城南门广场乘（）号车，前往百牛渡江景区，车程约20分钟。'
      },
      {
      title: '21:10 品小吃、观光影',
      text: '由工作人员引领，前往观影区（）号亭入坐，参加品美食、观光影活动，时长约1个小时20分钟。'
      },
      {
      title: '22:30 结束返程',
      text: '由工作人员引领，在牛街停车场乘坐（）号车返回酒店休息。'
      },
      ],
      }
      },
      methods: {
      seeXc() {
      this.$prompt('请输入手机号', '', {
      confirmButtonText: '确定',
      showCancelButton: false,
      roundButton: true,
      showClose: false,
      inputPattern: /^1[3456789]\d{9}$/,
      inputErrorMessage: '手机号格式不正确'
      }).then(({
      value
      }) => {
      this.$message({
      type: 'success',
      message: '你的手机号是: ' + value
      });
      }).catch(() => {
      /* this.$message({
      type: 'info',
      message: '取消输入'
      }); */
      });
      },
      },
      })
      </script>
      </html>
      \ No newline at end of file
      page/index.js 0 → 100644
      View file @ 7a1e2b49
      // rem单位换算
      (function(doc, win) {
      var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
      docEl.style.fontSize = '100px';
      } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      // 利用rem布局，根据公式
      // html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度
      // 计算html元素的font-size,使1rem等于100px,方便快速开发
      }
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
      \ No newline at end of file
      page/index2.css 0 → 100644
      View file @ 7a1e2b49
      body {
      margin: 0;
      background-color: #F0F0F0;
      }
      .video-box {
      display: flex;
      }
      .video-style {
      width: 100%;
      }
      .full-box {
      width: 100%;
      /* height: 7.54rem; */
      /* overflow: hidden; */
      /* background-color: #EDEDED; */
      /* background: url(img/1.png) center center no-repeat;
      background-size: cover; */
      position: relative;
      }
      .full-img {
      width: 100%;
      }
      @-webkit-keyframes moveFromTop {
      from {
      -webkit-transform: translateY(-200%);
      }
      }
      @keyframes moveFromTop {
      from {
      -webkit-transform: translateY(-200%);
      transform: translateY(-200%);
      }
      }
      .xc-btn-box {
      width: 1.5rem;
      height: 0.7rem;
      color: #F0F0F0;
      font-size: 0.28rem;
      text-align: center;
      line-height: 0.7rem;
      background: url(img/xc-bg.png) center center no-repeat;
      background-size: cover;
      position: absolute;
      top: 75%;
      right: 0;
      z-index: 999;
      -webkit-animation: moveFromTop 1s ease both;
      animation: moveFromTop 1s ease both;
      }
      /* .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
      }
      .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
      } */
      .el-carousel__indicators--outside {
      display: none;
      }
      .el-carousel__mask {
      opacity: .4;
      }
      .active-item {
      background-color: #fff;
      }
      .active-img-box {
      width: 5rem;
      height: 2.9rem;
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      position: relative;
      }
      .active-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      }
      .border-img {
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
      }
      .text-box {
      color: #656565;
      font-size: 0.22rem;
      background-color: #fff;
      border-radius: 0 0 10px 10px;
      padding: 0 0.3rem;
      }
      .text-box h6 {
      color: #313131;
      font-size: 0.3rem;
      margin: 0.36rem 0 0.2rem 0;
      }
      .text-box p {
      margin: 0;
      line-height: 0.3rem;
      padding-bottom: 0.2rem;
      }
      .banner-box {
      padding: 0 0.2rem;
      }
      .banner-img-box {
      width: 100%;
      height: 3.2rem;
      }
      .xc-box-1 {
      position: relative;
      }
      .xc-title-box {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      }
      .xc-title-img {
      width: 100%;
      }
      .xc-box {
      margin: 0 0.2rem;
      background: #FFFFFF;
      border-radius: 10px;
      padding: 0.66rem 0.38rem 1rem 0.38rem;
      /* background: url('img/xc-box-bg.png') center no-repeat; */
      /* background-size: cover; */
      }
      .xc-box-1-bg {
      }
      .xc-tip {
      color: #C42C2D;
      font-size: 0.32rem;
      font-weight: bold;
      }
      .sc-tip-img {
      width: 0.58rem;
      height: 0.5rem;
      overflow: hidden;
      background: url('img/title-icon.png') center no-repeat;
      background-size: cover;
      display: inline-block;
      margin-right: 0.1rem;
      vertical-align: bottom;
      }
      .xc-item {
      color: #656565;
      font-size: 0.24rem;
      line-height: 0.4rem;
      padding: 0.2rem 0;
      }
      .xc-item-tip {
      color: #313131;
      font-weight: bold;
      padding-bottom: 0.2rem;
      }
      .item-tip-icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #C42C2D;
      border-radius: 50%;
      margin-right: 0.1rem;
      vertical-align: middle;
      }
      .xc-item-text {
      padding-left: 0.3rem;
      }
      .link-img {
      width: 5.5rem;
      height: 0.86rem;
      margin: 0 auto;
      background: url('img/line.png') center no-repeat;
      background-size: cover;
      position: absolute;
      margin-left: -2.75rem;
      left: 50%;
      z-index: 999;
      top: -0.27rem;
      }
      .link-img-box {
      position: relative;
      width: 100%;
      height: 0.32rem;
      }
      .bottom-bg-box {
      position: relative;
      }
      .niu2-img{
      width: 100%;
      height: 6.6rem;
      position: absolute;
      top: -2.2rem;
      }
      .niu2-img img {
      width: 100%;
      }
      .el-message-box {
      width: 6rem !important;
      height: 4.6rem !important;
      font-size: 0.32rem !important;
      }
      .el-message-box__header {
      padding: 0.6rem 0 0 !important;
      }
      .el-message-box__content {
      font-size: 32px !important;
      padding: 0 0.6rem !important;
      }
      .el-message-box__container {
      color: #313131 !important;
      font-weight: bold !important;
      }
      .el-message-box__input {
      padding-top: 0.24rem !important;
      }
      .el-input{
      font-size: 0.32rem !important;
      }
      .el-input__inner {
      height: 0.8rem !important;
      }
      .el-message-box__errormsg {
      font-size: 0.28rem !important;
      }
      .el-message-box__btns {
      padding: 1rem 0.6rem 0 !important;
      }
      .el-button--small {
      padding: 0.26rem 0.5rem !important;
      }
      .el-button--small {
      font-size: 0.32rem !important;
      border-radius: 10px !important;
      }
      .el-button--primary {
      background: #C42C2D !important;
      border: 1px solid #D2D2D2 !important;
      }
      \ No newline at end of file
      page/mgXc.html 0 → 100644
      View file @ 7a1e2b49
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <title>蓬安风貌</title>
      <link rel="stylesheet" href="index.css">
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <script>
      // rem单位换算
      (function (doc, win) {
      var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
      docEl.style.fontSize = '100px';
      } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
      // 利用rem布局，根据公式
      // html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度
      // 计算html元素的font-size,使1rem等于100px,方便快速开发
      }
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
      </script>
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      </head>
      <body>
      <div id="app">
      <!-- 百牛渡江 -->
      <div class="full-box">
      <img src="img/bainiu.png" alt="" srcset="" class="full-img">
      </div>
      <!-- 行程 -->
      <div class="xc-box-1">
      <div style="padding-top: 1rem;">
      <div class="xc-box xc-box-1-bg">
      <div class="xc-tip">
      <div class="sc-tip-img"></div>
      <span>4.29行程（星期四）</span>
      </div>
      <div class="xc-item" v-for="item in xcAttr1" :key="index">
      <div class="xc-item-tip">
      <span class="item-tip-icon"></span>
      <span>{{item.title}}</span>
      </div>
      <div class="xc-item-text">{{item.text}}</div>
      </div>
      </div>
      </div>
      </div>
      <div class="link-img-box">
      <div class="link-img"></div>
      </div>
      <div class="xc-box-2">
      <div class="xc-box">
      <div class="xc-tip">
      <div class="sc-tip-img"></div>
      <span>5.30行程（星期五）</span>
      </div>
      <div class="xc-item" v-for="item in xcAttr1" :key="index">
      <div class="xc-item-tip">
      <span class="item-tip-icon"></span>
      <span>{{item.title}}</span>
      </div>
      <div class="xc-item-text">{{item.text}}</div>
      </div>
      </div>
      </div>
      <div class="bottom-bg-box">
      <div class="niu2-img">
      <img src="img/2niu.png" alt="" srcset="">
      </div>
      </div>
      </div>
      </body>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
      // import img_url from 'img/2-1.png'
      new Vue({
      el: '#app',
      data: function () {
      return {
      visible: false,
      xcAttr1: [{
      title: '15:00—18:00 报到入住',
      text: '在（）酒店（）号房间报到入住。'
      },
      {
      title: '18:00 欢迎晚宴',
      text: '在（）酒店（）楼（）号桌入座用餐，餐前（县领导）致欢迎词。'
      },
      {
      title: '19:30 出发前往相如故古城',
      text: '在（）酒店楼下集合乘坐（）号车前往相如故城，车程约30分钟（根据酒店位置确定）。'
      },
      {
      title: '20:00 夜游故城',
      text: '相如故城观光影，时长约50分钟'
      },
      {
      title: '20:50 出发前往百牛渡江',
      text: '在相如故城南门广场乘（）号车，前往百牛渡江景区，车程约20分钟。'
      },
      {
      title: '21:10 品小吃、观光影',
      text: '由工作人员引领，前往观影区（）号亭入坐，参加品美食、观光影活动，时长约1个小时20分钟。'
      },
      {
      title: '22:30 结束返程',
      text: '由工作人员引领，在牛街停车场乘坐（）号车返回酒店休息。'
      },
      ],
      }
      },
      methods: {
      },
      })
      </script>
      </html>
      \ No newline at end of file
      page/vue.js 0 → 100644
      View file @ 7a1e2b49
      This source diff could not be displayed because it is too large. You can view the blob instead.
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment