Skip to content

P
penganfangniujie
Commit 9b5caa9d authored by 张巧娟's avatar 张巧娟
Browse files
Options

update

parent 12e1f456
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 338 deletions
page/img/1.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/1.png

724 KB | W: | H:

page/img/1.png

212 KB | W: | H:

page/img/1.png
page/img/1.png
page/img/1.png
page/img/1.png
  • 2-up
  • Swipe
  • Onion skin
page/img/2-1.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/2-1.png

150 KB | W: | H:

page/img/2-1.png

46.6 KB | W: | H:

page/img/2-1.png
page/img/2-1.png
page/img/2-1.png
page/img/2-1.png
  • 2-up
  • Swipe
  • Onion skin
page/img/2-2-1.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/2-2-1.png

1.91 MB | W: | H:

page/img/2-2-1.png

784 KB | W: | H:

page/img/2-2-1.png
page/img/2-2-1.png
page/img/2-2-1.png
page/img/2-2-1.png
  • 2-up
  • Swipe
  • Onion skin
page/img/2-2-2.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/2-2-2.png

957 KB | W: | H:

page/img/2-2-2.png

369 KB | W: | H:

page/img/2-2-2.png
page/img/2-2-2.png
page/img/2-2-2.png
page/img/2-2-2.png
  • 2-up
  • Swipe
  • Onion skin
page/img/2-2.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/2-2.png

147 KB | W: | H:

page/img/2-2.png

47.6 KB | W: | H:

page/img/2-2.png
page/img/2-2.png
page/img/2-2.png
page/img/2-2.png
  • 2-up
  • Swipe
  • Onion skin
page/img/2-3.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/2-3.png

168 KB | W: | H:

page/img/2-3.png

50.6 KB | W: | H:

page/img/2-3.png
page/img/2-3.png
page/img/2-3.png
page/img/2-3.png
  • 2-up
  • Swipe
  • Onion skin
page/img/2-4.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/2-4.png

159 KB | W: | H:

page/img/2-4.png

48.9 KB | W: | H:

page/img/2-4.png
page/img/2-4.png
page/img/2-4.png
page/img/2-4.png
  • 2-up
  • Swipe
  • Onion skin
page/img/2-5.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/2-5.png

123 KB | W: | H:

page/img/2-5.png

44.7 KB | W: | H:

page/img/2-5.png
page/img/2-5.png
page/img/2-5.png
page/img/2-5.png
  • 2-up
  • Swipe
  • Onion skin
page/img/2niu.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/2niu.png

1.08 MB | W: | H:

page/img/2niu.png

221 KB | W: | H:

page/img/2niu.png
page/img/2niu.png
page/img/2niu.png
page/img/2niu.png
  • 2-up
  • Swipe
  • Onion skin
page/img/3-1.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/3-1.png

416 KB | W: | H:

page/img/3-1.png

110 KB | W: | H:

page/img/3-1.png
page/img/3-1.png
page/img/3-1.png
page/img/3-1.png
  • 2-up
  • Swipe
  • Onion skin
page/img/3-2.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/3-2.png

362 KB | W: | H:

page/img/3-2.png

84.9 KB | W: | H:

page/img/3-2.png
page/img/3-2.png
page/img/3-2.png
page/img/3-2.png
  • 2-up
  • Swipe
  • Onion skin
page/img/3-3.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/3-3.png

460 KB | W: | H:

page/img/3-3.png

139 KB | W: | H:

page/img/3-3.png
page/img/3-3.png
page/img/3-3.png
page/img/3-3.png
  • 2-up
  • Swipe
  • Onion skin
page/img/3-4.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/3-4.png

458 KB | W: | H:

page/img/3-4.png

135 KB | W: | H:

page/img/3-4.png
page/img/3-4.png
page/img/3-4.png
page/img/3-4.png
  • 2-up
  • Swipe
  • Onion skin
page/img/3-5.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/3-5.png

370 KB | W: | H:

page/img/3-5.png

83 KB | W: | H:

page/img/3-5.png
page/img/3-5.png
page/img/3-5.png
page/img/3-5.png
  • 2-up
  • Swipe
  • Onion skin
page/img/3-6.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/3-6.png

442 KB | W: | H:

page/img/3-6.png

142 KB | W: | H:

page/img/3-6.png
page/img/3-6.png
page/img/3-6.png
page/img/3-6.png
  • 2-up
  • Swipe
  • Onion skin
page/img/bainiu.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/bainiu.png

1.97 MB | W: | H:

page/img/bainiu.png

569 KB | W: | H:

page/img/bainiu.png
page/img/bainiu.png
page/img/bainiu.png
page/img/bainiu.png
  • 2-up
  • Swipe
  • Onion skin
page/img/border-img-lang.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/border-img-lang.png

44.2 KB | W: | H:

page/img/border-img-lang.png

29.4 KB | W: | H:

page/img/border-img-lang.png
page/img/border-img-lang.png
page/img/border-img-lang.png
page/img/border-img-lang.png
  • 2-up
  • Swipe
  • Onion skin
page/img/border-img.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/border-img.png

14.8 KB | W: | H:

page/img/border-img.png

5 KB | W: | H:

page/img/border-img.png
page/img/border-img.png
page/img/border-img.png
page/img/border-img.png
  • 2-up
  • Swipe
  • Onion skin
page/img/hdzs.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/hdzs.png

50.4 KB | W: | H:

page/img/hdzs.png

26.9 KB | W: | H:

page/img/hdzs.png
page/img/hdzs.png
page/img/hdzs.png
page/img/hdzs.png
  • 2-up
  • Swipe
  • Onion skin
page/img/hdzs@3x.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/hdzs@3x.png

130 KB | W: | H:

page/img/hdzs@3x.png

58.2 KB | W: | H:

page/img/hdzs@3x.png
page/img/hdzs@3x.png
page/img/hdzs@3x.png
page/img/hdzs@3x.png
  • 2-up
  • Swipe
  • Onion skin
page/img/line.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/line.png

4.87 KB | W: | H:

page/img/line.png

3.24 KB | W: | H:

page/img/line.png
page/img/line.png
page/img/line.png
page/img/line.png
  • 2-up
  • Swipe
  • Onion skin
page/img/text-bg.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/text-bg.png

38.1 KB | W: | H:

page/img/text-bg.png

21.5 KB | W: | H:

page/img/text-bg.png
page/img/text-bg.png
page/img/text-bg.png
page/img/text-bg.png
  • 2-up
  • Swipe
  • Onion skin
page/img/title-icon.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/title-icon.png

3.66 KB | W: | H:

page/img/title-icon.png

3.44 KB | W: | H:

page/img/title-icon.png
page/img/title-icon.png
page/img/title-icon.png
page/img/title-icon.png
  • 2-up
  • Swipe
  • Onion skin
page/img/video.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/video.png

314 KB | W: | H:

page/img/video.png

82.3 KB | W: | H:

page/img/video.png
page/img/video.png
page/img/video.png
page/img/video.png
  • 2-up
  • Swipe
  • Onion skin
page/img/xc-bg.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/xc-bg.png

9.17 KB | W: | H:

page/img/xc-bg.png

5.64 KB | W: | H:

page/img/xc-bg.png
page/img/xc-bg.png
page/img/xc-bg.png
page/img/xc-bg.png
  • 2-up
  • Swipe
  • Onion skin
page/img/xc-title.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/xc-title.png

24.8 KB | W: | H:

page/img/xc-title.png

9.29 KB | W: | H:

page/img/xc-title.png
page/img/xc-title.png
page/img/xc-title.png
page/img/xc-title.png
  • 2-up
  • Swipe
  • Onion skin
page/img/xc-title@2x.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/xc-title@2x.png

68.4 KB | W: | H:

page/img/xc-title@2x.png

25.8 KB | W: | H:

page/img/xc-title@2x.png
page/img/xc-title@2x.png
page/img/xc-title@2x.png
page/img/xc-title@2x.png
  • 2-up
  • Swipe
  • Onion skin
page/img/xc-title@3x.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/xc-title@3x.png

152 KB | W: | H:

page/img/xc-title@3x.png

52 KB | W: | H:

page/img/xc-title@3x.png
page/img/xc-title@3x.png
page/img/xc-title@3x.png
page/img/xc-title@3x.png
  • 2-up
  • Swipe
  • Onion skin
page/img/组 2.png
View replaced file @ 12e1f456 View file @ 9b5caa9d
page/img/组 2.png

379 KB | W: | H:

page/img/组 2.png

120 KB | W: | H:

page/img/组 2.png
page/img/组 2.png
page/img/组 2.png
page/img/组 2.png
  • 2-up
  • Swipe
  • Onion skin
page/index.css
View file @ 9b5caa9d
...@@ -6,8 +6,8 @@ body { ...@@ -6,8 +6,8 @@ body {
background-color: #F0F0F0; background-color: #F0F0F0;
} }
.video-box { .video-box video{
display: flex; vertical-align: middle;
} }
.video-style { .video-style {
...@@ -273,3 +273,6 @@ body { ...@@ -273,3 +273,6 @@ body {
background: #C42C2D !important; background: #C42C2D !important;
border: 1px solid #D2D2D2 !important; border: 1px solid #D2D2D2 !important;
} }
.vip-box p{
margin: 0;
}
\ No newline at end of file
page/index.html
View file @ 9b5caa9d
...@@ -2,118 +2,121 @@ ...@@ -2,118 +2,121 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- import CSS --> <!-- import CSS -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache"/> <meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/> <meta http-equiv="Expires" content="0" />
<title>南充市2021年嘉陵江放牛季启动仪式暨相如故城开城活动</title> <title>南充市2021年嘉陵江放牛季启动仪式暨相如故城开城活动</title>
<link rel="stylesheet" href="index.css?v=DHtM0X0Tzr6SroPwd4f"> <link rel="stylesheet" href="index.css?v=DHtM0X0Tzr6SroPwd4f">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element --> <!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="data.js?v=1"></script> <script src="data.js?v=1"></script>
</head> </head>
<body> <body>
<script> <srcipt src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">
function autoPlayVideo() { </script>
<script>
/* ios自动播放 */
function autoPlayVideo() {
/* 自动播放视频效果，解决浏览器或者APP自动播放问题 */ /* 自动播放视频效果，解决浏览器或者APP自动播放问题 */
function videoInBrowserHandler() { function videoInBrowserHandler() {
videoPlay(true); videoPlay(true);
document.body.removeEventListener('touchstart', videoInBrowserHandler); document.body.removeEventListener('touchstart', videoInBrowserHandler);
} }
document.body.addEventListener('touchstart', videoInBrowserHandler); document.body.addEventListener('touchstart', videoInBrowserHandler);
/* 自动播放视频效果，解决微信自动播放问题 */ /* 自动播放视频效果，解决微信自动播放问题 */
function videoInWeixinHandler() { function videoInWeixinHandler() {
videoPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
videoPlay(true); videoPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () { }, false);
videoPlay(true); document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);
}, false);
document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);
} }
document.addEventListener('DOMContentLoaded', videoInWeixinHandler); document.addEventListener('DOMContentLoaded', videoInWeixinHandler);
} }
function videoPlay(isPlay) { function videoPlay(isPlay) {
var media = document.getElementById('myVideo'); var media = document.getElementById('myVideo');
if (isPlay && media.paused) { if (isPlay && media.paused) {
media.play(); media.play();
} }
if (!isPlay && !media.paused) { if (!isPlay && !media.paused) {
media.pause(); media.pause();
} }
} }
autoPlayVideo(); autoPlayVideo();
</script> </script>
<div id="app"> <div id="app">
<!-- 视频 --> <!-- 视频 -->
<div class="video-box"> <div class="video-box">
<video id="myVideo" width="100%" playsinline="true" controls muted autoplay poster="img/video.png"> <video id="myVideo" width="100%" playsinline="true" controls autoplay poster="img/video.png" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint">
<source src="img/666.mp4" type="video/mp4"> <source src="img/666-1.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg"> --> <!-- <source src="movie.ogg" type="video/ogg"> -->
您的浏览器不支持Video标签。 您的浏览器不支持Video标签。
</video> </video>
</div> </div>
<!-- 百牛渡江 天下奇观 --> <!-- 百牛渡江 天下奇观 -->
<div class="full-box"> <div class="full-box">
<img src="img/bainiu.png" alt="" srcset="" class="full-img"> <img src="img/bainiu.png" alt="" srcset="" class="full-img">
<img src="img/hdzs.png" alt="" srcset="" class="full-img"> <img src="img/hdzs.png" alt="" srcset="" class="full-img">
</div> </div>
<!-- <div class="xc-btn-box" id="xcBtn" v-on:click="seeXc">--> <!-- <div class="xc-btn-box" id="xcBtn" v-on:click="seeXc">-->
<!-- 行程查询--> <!-- 行程查询-->
<!-- </div>--> <!-- </div>-->
<!-- 卡片加文字 走马灯 --> <!-- 卡片加文字 走马灯 -->
<div> <div>
<el-carousel :interval="2000" type="card" height="5.3rem"> <el-carousel :interval="2000" type="card" height="5.3rem">
<!-- <el-carousel-item v-for="item in activeAttr" :key="item"> --> <!-- <el-carousel-item v-for="item in activeAttr" :key="item"> -->
<el-carousel-item> <el-carousel-item>
<div class="active-item"> <div class="active-item">
<div class="active-img-box"> <div class="active-img-box">
<img src="img/2-1.png" alt="" srcset="" class="active-img"> <img src="img/2-1.png" alt="" srcset="" class="active-img">
<img src="img/border-img.png" alt="" srcset="" class="border-img"> <img src="img/border-img.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>文艺演出</h6> <h6>文艺演出</h6>
<p>每年的放牛季启动仪式，都会如期上演各类歌舞节目，美轮美奂、异彩纷呈。</p> <p>每年的放牛季启动仪式，都会如期上演各类歌舞节目，美轮美奂、异彩纷呈。</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="mask-div"></div> <div class="mask-div"></div>
<div class="active-item"> <div class="active-item">
<div class="active-img-box"> <div class="active-img-box">
<img src="img/2-2-2.png" alt="" srcset="" class="active-img"> <img src="img/2-2-2.png" alt="" srcset="" class="active-img">
<img src="img/border-img.png" alt="" srcset="" class="border-img"> <img src="img/border-img.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>牛街民俗展演</h6> <h6>牛街民俗展演</h6>
<p>在牛街，随处可见船工号子、彩牛巡街、金钱板等特色民俗展演活动，让游客能切身感受到本地乡风民俗。</p> <p>在牛街，随处可见船工号子、彩牛巡街、金钱板等特色民俗展演活动，让游客能切身感受到本地乡风民俗。</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="mask-div"></div> <div class="mask-div"></div>
<div class="active-item"> <div class="active-item">
<div class="active-img-box"> <div class="active-img-box">
<img src="img/2-5.png" alt="" srcset="" class="active-img"> <img src="img/2-5.png" alt="" srcset="" class="active-img">
<img src="img/border-img.png" alt="" srcset="" class="border-img"> <img src="img/border-img.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>趣味运动会</h6> <h6>趣味运动会</h6>
<p>游客可登上太阳岛参与各种趣味活动，在愉悦身心的同时还有机会赢得蓬安特产大礼包</p> <p>游客可登上太阳岛参与各种趣味活动，在愉悦身心的同时还有机会赢得蓬安特产大礼包</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
<!-- <el-carousel-item> <!-- <el-carousel-item>
<div class="mask-div"></div> <div class="mask-div"></div>
<div class="active-item"> <div class="active-item">
<div class="active-img-box"> <div class="active-img-box">
...@@ -141,288 +144,292 @@ ...@@ -141,288 +144,292 @@
</el-carousel-item> --> </el-carousel-item> -->
</el-carousel> </el-carousel>
</div> </div>
<!-- 轮播 --> <!-- 轮播 -->
<div class="banner-box"> <div class="banner-box">
<el-carousel indicator-position="outside" height="5.64rem"> <el-carousel indicator-position="outside" height="5.64rem">
<el-carousel-item> <el-carousel-item>
<div class="active-item"> <div class="active-item">
<div class="active-img-box banner-img-box"> <div class="active-img-box banner-img-box">
<img src="img/3-1.png" alt="" srcset="" class="active-img"> <img src="img/3-1.png" alt="" srcset="" class="active-img">
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img"> <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>放牛季启动仪式</h6> <h6>放牛季启动仪式</h6>
<p>嘉陵江放牛季活动创办于2010年，是蓬安乃至南充最重要的文旅活动之一，每年四月的最后一个周末正式开启，已连续成功举办11届。</p> <p>嘉陵江放牛季活动创办于2010年，是蓬安乃至南充最重要的文旅活动之一，每年四月的最后一个周末正式开启，已连续成功举办11届。</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="active-item"> <div class="active-item">
<div class="active-img-box banner-img-box"> <div class="active-img-box banner-img-box">
<img src="img/3-2.png" alt="" srcset="" class="active-img"> <img src="img/3-2-1.jpg" alt="" srcset="" class="active-img">
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img"> <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>太阳岛、月亮岛</h6> <h6>太阳岛、月亮岛</h6>
<p>蜿蜒嘉陵江流经蓬安后，由于江水冲刷、泥沙沉积，形成2个巨大的江中岛屿，即太阳岛和月亮岛，放牛季期间，数百头牛每天清晨都会从江对岸游到岛上去吃草，日息而返。</p> <p>蜿蜒嘉陵江流经蓬安后，由于江水冲刷、泥沙沉积，形成2个巨大的江中岛屿，即太阳岛和月亮岛，放牛季期间，数百头牛每天清晨都会从江对岸游到岛上去吃草，日息而返。</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="active-item"> <div class="active-item">
<div class="active-img-box banner-img-box"> <div class="active-img-box banner-img-box">
<img src="img/3-3.png" alt="" srcset="" class="active-img"> <img src="img/3-3.png" alt="" srcset="" class="active-img">
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img"> <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>丰草迎牛奔</h6> <h6>丰草迎牛奔</h6>
<p>百牛涌动，浩浩荡荡，争先恐后奔向太阳岛啃食青草，游客可在岛上近距离驻足欣赏这一生态奇观。</p> <p>百牛涌动，浩浩荡荡，争先恐后奔向太阳岛啃食青草，游客可在岛上近距离驻足欣赏这一生态奇观。</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="active-item"> <div class="active-item">
<div class="active-img-box banner-img-box"> <div class="active-img-box banner-img-box">
<img src="img/3-4.png" alt="" srcset="" class="active-img"> <img src="img/3-4.png" alt="" srcset="" class="active-img">
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img"> <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>牛鸟谐居</h6> <h6>牛鸟谐居</h6>
<p>苍山巍巍、碧水荡荡、青牛悠悠、白鹭啾啾，勾勒出一幅万物谐居、生机盎然的山水诗意画卷。</p> <p>苍山巍巍、碧水荡荡、青牛悠悠、白鹭啾啾，勾勒出一幅万物谐居、生机盎然的山水诗意画卷。</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="active-item"> <div class="active-item">
<div class="active-img-box banner-img-box"> <div class="active-img-box banner-img-box">
<img src="img/3-5.png" alt="" srcset="" class="active-img"> <img src="img/3-5.png" alt="" srcset="" class="active-img">
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img"> <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>放牛晚归</h6> <h6>放牛晚归</h6>
<p>暮色斜阳、晚霞映江，享受完丰盛的美食后，牛儿成群结队踏上返程路。</p> <p>暮色斜阳、晚霞映江，享受完丰盛的美食后，牛儿成群结队踏上返程路。</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
<el-carousel-item> <el-carousel-item>
<div class="active-item"> <div class="active-item">
<div class="active-img-box banner-img-box"> <div class="active-img-box banner-img-box">
<img src="img/3-6.png" alt="" srcset="" class="active-img"> <img src="img/3-6.png" alt="" srcset="" class="active-img">
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img"> <img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div> </div>
<div class="text-box"> <div class="text-box">
<h6>田园生活馆</h6> <h6>田园生活馆</h6>
<p>坐落于百牛渡江景区的田园生活馆，是集餐饮、住宿、会议、接待于一体的多功能综合服务中心</p> <p>坐落于百牛渡江景区的田园生活馆，是集餐饮、住宿、会议、接待于一体的多功能综合服务中心</p>
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<!-- 行程 --> <!-- 行程 -->
<div class="xc-box-1"> <div class="xc-box-1">
<div class="xc-title-box"> <div class="xc-title-box">
<img src="img/xc-title.png" alt="" srcset="" class="xc-title-img"> <img src="img/xc-title.png" alt="" srcset="" class="xc-title-img">
</div> </div>
<div style="padding-top: 1rem;"> <div style="padding-top: 1rem;">
<div class="xc-box xc-box-1-bg"> <div class="xc-box xc-box-1-bg">
<template v-if="vip.name"> <template v-if="vip.name">
<div style="font-size: 0.4rem;margin: 10px auto;"> <div style="font-size: 0.4rem;" class="vip-box">
<p> <p>
尊敬的<b style="color: #C42C2D">{{vip.name}}</b>巡视员:</p> 尊敬的<b style="color: #C42C2D">{{vip.name}}</b>巡视员:</p>
<p>印象嘉陵 江，千年相如城。</p> <p>印象嘉陵 江，千年相如城。</p>
<p>我们怀着激动的心情，终于迎来南充市2021年嘉陵江放牛季启动仪式暨相如故城开城活动启航。我们对您的到来表示最热烈的欢迎和最诚挚的感谢。您在蓬安期间的专属服务人员是：<b style="color: #C42C2D">{{vip.workername}}</b>，联系电话：<b style="color: #C42C2D">{{vip.workerphone}}</b>。如您有需要的地方，我们随时竭诚为您服务。</p> <p>我们怀着激动的心情，终于迎来南充市2021年嘉陵江放牛季启动仪式暨相如故城开城活动启航。我们对您的到来表示最热烈的欢迎和最诚挚的感谢。您在蓬安期间的专属服务人员是：<b
<p> style="color: #C42C2D">{{vip.workername}}</b>，联系电话：<b
为了您能够在蓬安享受更加热情周到的服务，我们特地为您梳理具体行程如下： style="color: #C42C2D">{{vip.workerphone}}</b>。如您有需要的地方，我们随时竭诚为您服务。</p>
</p> <p>
</div> 为了您能够在蓬安享受更加热情周到的服务，我们特地为您梳理具体行程如下：
</template> </p>
<div class="xc-tip"> </div>
<div class="sc-tip-img"></div> </template>
<span>4.29行程（星期四）</span> <div class="xc-tip">
</div> <div class="sc-tip-img"></div>
<div class="xc-item" v-for="item in vip.xcAttr1"> <span>4.29行程（星期四）</span>
<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="xc-item" v-for="item in vip.xcAttr1">
<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> </div>
<div class="link-img-box"> <div class="link-img-box">
<div class="link-img"></div> <div class="link-img"></div>
</div> </div>
<div class="xc-box-2"> <div class="xc-box-2">
<div class="xc-box"> <div class="xc-box">
<div class="xc-tip"> <div class="xc-tip">
<div class="sc-tip-img"></div> <div class="sc-tip-img"></div>
<span>4.30行程（星期五）</span> <span>4.30行程（星期五）</span>
</div> </div>
<div class="xc-item" v-for="item in vip.xcAttr2"> <div class="xc-item" v-for="item in vip.xcAttr2">
<div class="xc-item-tip"> <div class="xc-item-tip">
<span class="item-tip-icon"></span> <span class="item-tip-icon"></span>
<span>{{item.title}}</span> <span>{{item.title}}</span>
</div>
<!-- <div class="xc-item-text">{{item.text}}</div>-->
</div> </div>
<!-- <div class="xc-item-text">{{item.text}}</div>-->
</div>
</div> </div>
</div> </div>
<div class="bottom-bg-box"> <div class="bottom-bg-box">
<div class="niu2-img"> <div class="niu2-img">
<img src="img/2niu.png" alt="" srcset=""> <img src="img/2niu.png" alt="" srcset="">
</div> </div>
<div></div> <div></div>
</div> </div>
<div style="font-size: 0.24rem;width: 100%;margin: 0 auto;text-align: center;color:#ffffff;background-color:#000000;"> <div
style="font-size: 0.24rem;width: 100%;margin: 0 auto;text-align: center;color:#ffffff;background-color:#000000;">
技术支持：中国电信股份有限公司南充分公司 技术支持：中国电信股份有限公司南充分公司
</div> </div>
</div> </div>
<!-- import JavaScript --> <!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script> <script>
// rem单位换算 // rem单位换算
(function (doc, win) { (function (doc, win) {
console.log('doc.documentElement') console.log('doc.documentElement')
var docEl = doc.documentElement, var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () { recalc = function () {
var clientWidth = docEl.clientWidth; var clientWidth = docEl.clientWidth;
if (!clientWidth) return; if (!clientWidth) return;
if (clientWidth >= 750) { if (clientWidth >= 750) {
docEl.style.fontSize = '100px'; docEl.style.fontSize = '100px';
} else { } else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
// 利用rem布局，根据公式 // 利用rem布局，根据公式
// html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度 // html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度
// 计算html元素的font-size,使1rem等于100px,方便快速开发 // 计算html元素的font-size,使1rem等于100px,方便快速开发
} }
}; };
if (!doc.addEventListener) return; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); })(document, window);
</script> </script>
<script> <script>
// import img_url from 'img/2-1.png' // import img_url from 'img/2-1.png'
new Vue({ new Vue({
el: '#app', el: '#app',
data: function () { data: function () {
return { return {
visible: false, visible: false,
vip: { vip: {
name: '', name: '',
workername: '', workername: '',
workerphone: '', workerphone: '',
xcAttr1: [{ xcAttr1: [{
title: '15:00—18:00 报到入住。', title: '15:00—18:00 报到入住。',
text: '' text: ''
}, },
{ {
title: '18:30 举行欢迎晚宴。', title: '18:30 举行欢迎晚宴。',
text: '。' text: '。'
}, },
{ {
title: '19:30 出发前往相如故城。请您在百牛渡江民宿楼下集合乘车前往相如故城，车程约20分钟。', title: '19:30 出发前往相如故城。请您在百牛渡江民宿楼下集合乘车前往相如故城，车程约20分钟。',
text: '' text: ''
}, },
{ {
title: '20:00 夜游相如故城。请您跟随团队一起，在相如故城观光影，时长约50分钟。', title: '20:00 夜游相如故城。请您跟随团队一起，在相如故城观光影，时长约50分钟。',
text: '' text: ''
}, },
{ {
title: '20:50 出发前往百牛渡江。请您在相如故城南门广场乘车，前往百牛渡江景区，车程约20分钟。', title: '20:50 出发前往百牛渡江。请您在相如故城南门广场乘车，前往百牛渡江景区，车程约20分钟。',
text: '' text: ''
}, },
{ {
title: '21:10 品小吃、观光影。请您下车后，在工作人员引领下，参加品美食、观光影活动，时长约1个小时20分钟。', title: '21:10 品小吃、观光影。请您下车后，在工作人员引领下，参加品美食、观光影活动，时长约1个小时20分钟。',
text: '' text: ''
}, },
{ {
title: '22:30 结束返程。请您原车返回下榻酒店。', title: '22:30 结束返程。请您原车返回下榻酒店。',
text: '' text: ''
}, },
], ],
xcAttr2: [{ xcAttr2: [{
title: '07:00 早餐。请您在酒店自助餐区用餐。', title: '07:00 早餐。请您在酒店自助餐区用餐。',
text: '' text: ''
}, },
{ {
title: '07:30 出发前往百牛渡江景区。请在住宿酒店楼下，乘车前往百牛渡江景区，车程约20分钟。', title: '07:30 出发前往百牛渡江景区。请在住宿酒店楼下，乘车前往百牛渡江景区，车程约20分钟。',
text: '。' text: '。'
}, },
{ {
title: '08:00 参加放牛季启动仪式。下车后，请在工作人员引领下，前往活动现场，活动时长约50分钟。', title: '08:00 参加放牛季启动仪式。下车后，请在工作人员引领下，前往活动现场，活动时长约50分钟。',
text: '' text: ''
}, },
{ {
title: '08:50 乘船前往相如故城。请您在工作人员引导下，前往相如故城，行程约30分钟。', title: '08:50 乘船前往相如故城。请您在工作人员引导下，前往相如故城，行程约30分钟。',
text: '' text: ''
}, },
{ {
title: '10:00 参加开城活动。下船后，在工作人员引领下，参加相如故城开城活动，时长约1个小时。', title: '10:00 参加开城活动。下船后，在工作人员引领下，参加相如故城开城活动，时长约1个小时。',
text: '' text: ''
}, },
{ {
title: '11:00 游览相如故城。', title: '11:00 游览相如故城。',
text: '' text: ''
}, },
{ {
title: '12:00 返回酒店。', title: '12:00 返回酒店。',
text: '' text: ''
}, },
{ {
title: '13:30 活动结束。', title: '13:30 活动结束。',
text: '' text: ''
}, },
], ],
}
} }
}
}, },
mounted: function () { mounted: function () {
this.$nextTick(function () { this.$nextTick(function () {
this.vip=vips[this.getQueryVariable("id")-1]; this.vip = vips[this.getQueryVariable("id") - 1];
}) })
}, },
methods: { methods: {
// seeXc() { // seeXc() {
// this.$prompt('请输入手机号', '', { // this.$prompt('请输入手机号', '', {
// confirmButtonText: '确定', // confirmButtonText: '确定',
// showCancelButton: false, // showCancelButton: false,
// roundButton: true, // roundButton: true,
// showClose: false, // showClose: false,
// inputPattern: /^1[3456789]\d{9}$/, // inputPattern: /^1[3456789]\d{9}$/,
// inputErrorMessage: '手机号格式不正确' // inputErrorMessage: '手机号格式不正确'
// }).then(({ // }).then(({
// value // value
// }) => { // }) => {
// this.$message({ // this.$message({
// type: 'success', // type: 'success',
// message: '你的手机号是: ' + value // message: '你的手机号是: ' + value
// }); // });
// }).catch(() => { // }).catch(() => {
// /* this.$message({ // /* this.$message({
// type: 'info', // type: 'info',
// message: '取消输入' // message: '取消输入'
// }); */ // }); */
// }); // });
// }, // },
getQueryVariable(variable) { getQueryVariable(variable) {
var query = window.location.search.substring(1); var query = window.location.search.substring(1);
var vars = query.split("&"); var vars = query.split("&");
for (var i = 0; i < vars.length; i++) { for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("="); var pair = vars[i].split("=");
if (pair[0] == variable) { if (pair[0] == variable) {
return pair[1]; return pair[1];
}
} }
} return (false);
return (false); },
},
}, },
}) })
</script> </script>
</body> </body>
</html>
</html>
\ No newline at end of file
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