Skip to content

P
penganfangniujie
Commit 67a8b814 authored by 李波's avatar 李波
Browse files
Options

2021-04-27

parent a9cf40e7
Hide whitespace changes
Inline Side-by-side
Showing with 551 additions and 348 deletions
.idea/workspace.xml
View file @ 67a8b814
......@@ -2,8 +2,11 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="f0421ba8-2ee0-449a-9a4a-029934c6b8ab" name="默认更改列表" comment="">
<change afterPath="$PROJECT_DIR$/page/data.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/page/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/page/index.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/page/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/page/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/page/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/page/index.js" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
......@@ -19,18 +22,55 @@
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/page/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="216">
<caret line="17" column="26" selection-start-line="17" selection-start-column="26" selection-end-line="17" selection-end-column="26" />
<state relative-caret-position="728">
<caret line="399" column="35" lean-forward="true" selection-start-line="399" selection-start-column="35" selection-end-line="399" selection-end-column="35" />
<folding>
<element signature="n#style#0;n#div#0;n#div#0;n#div#1;n#div#5;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#b#0;n#p#0;n#div#0;n#div#0;n#div#1;n#div#4;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#b#0;n#p#2;n#div#0;n#div#0;n#div#1;n#div#4;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#b#0;n#b#0;n#p#2;n#div#0;n#div#0;n#div#1;n#div#4;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#div#9;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/page/data.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1782">
<caret line="66" column="1" selection-start-line="66" selection-start-column="1" selection-end-line="66" selection-end-column="1" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/page/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="296">
<caret line="19" column="21" lean-forward="true" selection-start-line="19" selection-start-column="21" selection-end-line="19" selection-end-column="21" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/page/index.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="189">
<caret line="175" column="17" lean-forward="true" selection-start-line="175" selection-start-column="17" selection-end-line="175" selection-end-column="17" />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="JavaScript File" />
</list>
</option>
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>xcAttr1</find>
......@@ -42,6 +82,10 @@
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/page/index.css" />
<option value="$PROJECT_DIR$/data.js" />
<option value="$PROJECT_DIR$/page/index.js" />
<option value="$PROJECT_DIR$/page/data.js" />
<option value="$PROJECT_DIR$/page/index.html" />
</list>
</option>
......@@ -70,12 +114,6 @@
<item name="penganfangniujie" type="462c0819:PsiDirectoryNode" />
<item name="page" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="penganfangniujie" type="b2602c69:ProjectViewProjectNode" />
<item name="penganfangniujie" type="462c0819:PsiDirectoryNode" />
<item name="page" type="462c0819:PsiDirectoryNode" />
<item name="img" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
......@@ -90,6 +128,11 @@
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="E:\guidangwenjian\penganfangniujie\page" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
......@@ -112,7 +155,7 @@
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1619449663855</updated>
<workItem from="1619449668450" duration="2205000" />
<workItem from="1619449668450" duration="7155000" />
</task>
<task id="LOCAL-00001" summary="2021-04-26">
<created>1619451069058</created>
......@@ -121,23 +164,31 @@
<option name="project" value="LOCAL" />
<updated>1619451069059</updated>
</task>
<option name="localTasksCounter" value="2" />
<task id="LOCAL-00002" summary="2021-04-26">
<created>1619451954729</created>
<option name="number" value="00002" />
<option name="presentableId" value="LOCAL-00002" />
<option name="project" value="LOCAL" />
<updated>1619451954729</updated>
</task>
<option name="localTasksCounter" value="3" />
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="2205000" />
<option name="totallyTimeSpent" value="7155000" />
</component>
<component name="ToolWindowManager">
<frame x="-8" y="-8" width="1936" height="1056" extended-state="6" />
<editor active="true" />
<layout>
<window_info id="Favorites" side_tool="true" />
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.25" />
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info anchor="bottom" id="Docker" show_stripe_button="false" />
<window_info active="true" anchor="bottom" id="Version Control" visible="true" />
<window_info anchor="bottom" id="Version Control" />
<window_info anchor="bottom" id="Terminal" />
<window_info anchor="bottom" id="Event Log" side_tool="true" />
<window_info anchor="bottom" id="调试" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" />
......@@ -159,12 +210,36 @@
<option name="LAST_COMMIT_MESSAGE" value="2021-04-26" />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/page/index.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="189">
<caret line="175" column="17" lean-forward="true" selection-start-line="175" selection-start-column="17" selection-end-line="175" selection-end-column="17" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/page/data.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1782">
<caret line="66" column="1" selection-start-line="66" selection-start-column="1" selection-end-line="66" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/page/index.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="296">
<caret line="19" column="21" lean-forward="true" selection-start-line="19" selection-start-column="21" selection-end-line="19" selection-end-column="21" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/page/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="216">
<caret line="17" column="26" selection-start-line="17" selection-start-column="26" selection-end-line="17" selection-end-column="26" />
<state relative-caret-position="728">
<caret line="399" column="35" lean-forward="true" selection-start-line="399" selection-start-column="35" selection-end-line="399" selection-end-column="35" />
<folding>
<element signature="n#style#0;n#div#0;n#div#0;n#div#1;n#div#5;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#b#0;n#p#0;n#div#0;n#div#0;n#div#1;n#div#4;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#b#0;n#p#2;n#div#0;n#div#0;n#div#1;n#div#4;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#b#0;n#b#0;n#p#2;n#div#0;n#div#0;n#div#1;n#div#4;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#div#9;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
</folding>
</state>
......
page/data.js 0 → 100644
View file @ 67a8b814
let vips=[{
name: '蒲正和',
workername: '黄亮',
workerphone: '13659087400',
xcAttr1: [{
title: '15:00—18:00 报到入住。您下榻的酒店是百牛渡江民宿，房间号是017，房卡已提前交给您的专属服务人员。',
text: ''
},
{
title: '18:30 举行欢迎晚宴。请您在百牛渡江田园生活馆一楼2号桌用餐。',
text: '。'
},
{
title: '19:30 出发前往相如故城。请您在百牛渡江民宿楼下集合乘坐01号车前往相如故城，车程约20分钟。',
text: ''
},
{
title: '20:00 夜游相如故城。请您跟随团队一起，在相如故城观光影，时长约50分钟。',
text: ''
},
{
title: '20:50 出发前往百牛渡江。请您在相如故城南门广场乘01号车，前往百牛渡江景区，车程约20分钟。',
text: ''
},
{
title: '21:10 品小吃、观光影。请您下车后，在工作人员引领下，参加品美食、观光影活动，时长约1个小时20分钟。',
text: ''
},
{
title: '22:30 结束返程。请您原车返回下榻酒店。',
text: ''
},
],
xcAttr2: [{
title: '07:00 早餐。请您在酒店百牛渡江田园生活馆自助餐区用餐。',
text: ''
},
{
title: '07:30 出发前往百牛渡江景区。请在住宿酒店楼下，乘坐1号车前往百牛渡江景区，车程约20分钟。',
text: '。'
},
{
title: '08:00 参加放牛季启动仪式。下车后，请在工作人员引领下，前往活动现场，您的座位在（3）排（25）号，活动时长约50分钟。',
text: ''
},
{
title: '08:50 乘船前往相如故城。请您在工作人员引导下，乘坐1号船，前往相如故城，行程约30分钟。',
text: ''
},
{
title: '10:00 参加开城活动。下船后，在工作人员引领下，在（3）排（25）号座就坐，参加相如故城开城活动，时长约1个小时。',
text: ''
},
{
title: '11:00 游览相如故城。开城活动结束后，组织游览相如故城，游览时长约1个小时。',
text: ''
},
{
title: '12:00 返回酒店。游览结束后，在相如故城东门广场乘坐1号车，返回入住酒店吃午餐。',
text: ''
},
{
title: '13:30 活动结束。',
text: ''
},
],
}]
page/index.css
View file @ 67a8b814
......@@ -128,7 +128,7 @@ body {
}
.xc-box-1 {
position: relative;
}
......@@ -174,7 +174,7 @@ body {
.xc-item {
color: #656565;
font-size: 0.24rem;
font-size: 0.3rem;
line-height: 0.4rem;
padding: 0.2rem 0;
}
......@@ -272,4 +272,4 @@ body {
.el-button--primary {
background: #C42C2D !important;
border: 1px solid #D2D2D2 !important;
}
\ No newline at end of file
}
page/index.html
View file @ 67a8b814
......@@ -2,377 +2,426 @@
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>蓬安风貌</title>
<link rel="stylesheet" href="index.css?v=DHtM0X0Tzr6SroPwd4d">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<meta charset="UTF-8">
<!-- import CSS -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<title>南充市2021年嘉陵江放牛季启动仪式暨相如故城开城活动</title>
<link rel="stylesheet" href="index.css?v=DHtM0X0Tzr6SroPwd4f">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="data.js?v=1"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="data.js?v=1"></script>
</head>
<body>
<div id="app">
<div id="app">
<!-- 视频 -->
<div class="video-box">
<video id="myVideo" width="100%" playsinline="true" controls muted autoplay poster="img/video.png">
<source src="img/666.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg"> -->
您的浏览器不支持Video标签。
</video>
<video id="myVideo" width="100%" playsinline="true" controls muted autoplay poster="img/video.png">
<source src="img/666.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg"> -->
您的浏览器不支持Video标签。
</video>
</div>
<script>
function autoPlayVideo() {
/* 自动播放视频效果，解决浏览器或者APP自动播放问题 */
function videoInBrowserHandler() {
videoPlay(true);
document.body.removeEventListener('touchstart', videoInBrowserHandler);
}
document.body.addEventListener('touchstart', videoInBrowserHandler);
/* 自动播放视频效果，解决微信自动播放问题 */
function videoInWeixinHandler() {
videoPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
videoPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', videoInWeixinHandler);
}
function autoPlayVideo() {
/* 自动播放视频效果，解决浏览器或者APP自动播放问题 */
function videoInBrowserHandler() {
videoPlay(true);
document.body.removeEventListener('touchstart', videoInBrowserHandler);
}
document.body.addEventListener('touchstart', videoInBrowserHandler);
function videoPlay(isPlay) {
var media = document.getElementById('myVideo');
if (isPlay && media.paused) {
media.play();
/* 自动播放视频效果，解决微信自动播放问题 */
function videoInWeixinHandler() {
videoPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
videoPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', videoInWeixinHandler);
}
if (!isPlay && !media.paused) {
media.pause();
function videoPlay(isPlay) {
var media = document.getElementById('myVideo');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}
}
autoPlayVideo();
autoPlayVideo();
</script>
<!-- 百牛渡江 天下奇观 -->
<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">
行程查询
<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="5.3rem">
<!-- <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>每年的放牛季启动仪式，都会如期上演各类歌舞节目，美轮美奂、异彩纷呈。</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-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>在牛街，随处可见船工号子、彩牛巡街、金钱板等特色民俗展演活动，让游客能切身感受到本地乡风民俗。</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">
<el-carousel :interval="2000" type="card" height="5.3rem">
<!-- <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>每年的放牛季启动仪式，都会如期上演各类歌舞节目，美轮美奂、异彩纷呈。</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-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>在牛街，随处可见船工号子、彩牛巡街、金钱板等特色民俗展演活动，让游客能切身感受到本地乡风民俗。</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>游客可登上太阳岛参与各种趣味活动，在愉悦身心的同时还有机会赢得蓬安特产大礼包</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>每年的放牛季启动仪式，都会如期上演各类歌舞节目，美轮美奂、异彩纷呈。</p>
</div>
</div>
<div class="text-box">
<h6>趣味运动会</h6>
<p>游客可登上太阳岛参与各种趣味活动，在愉悦身心的同时还有机会赢得蓬安特产大礼包</p>
</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>
</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>每年的放牛季启动仪式，都会如期上演各类歌舞节目，美轮美奂、异彩纷呈。</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> -->
</el-carousel>
</el-carousel>
</div>
<!-- 轮播 -->
<div class="banner-box">
<el-carousel indicator-position="outside" height="5.64rem">
<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年，是蓬安乃至南充最重要的文旅活动之一，每年四月的最后一个周末正式开启，已连续成功举办11届。</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>蜿蜒嘉陵江流经蓬安后，由于江水冲刷、泥沙沉积，形成2个巨大的江中岛屿，即太阳岛和月亮岛，放牛季期间，数百头牛每天清晨都会从江对岸游到岛上去吃草，日息而返。</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>百牛涌动，浩浩荡荡，争先恐后奔向太阳岛啃食青草，游客可在岛上近距离驻足欣赏这一生态奇观。</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>苍山巍巍、碧水荡荡、青牛悠悠、白鹭啾啾，勾勒出一幅万物谐居、生机盎然的山水诗意画卷。</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>暮色斜阳、晚霞映江，享受完丰盛的美食后，牛儿成群结队踏上返程路。</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>坐落于百牛渡江景区的田园生活馆，是集餐饮、住宿、会议、接待于一体的多功能综合服务中心</p>
</div>
</div>
</el-carousel-item>
</el-carousel>
<el-carousel indicator-position="outside" height="5.64rem">
<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年，是蓬安乃至南充最重要的文旅活动之一，每年四月的最后一个周末正式开启，已连续成功举办11届。</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>蜿蜒嘉陵江流经蓬安后，由于江水冲刷、泥沙沉积，形成2个巨大的江中岛屿，即太阳岛和月亮岛，放牛季期间，数百头牛每天清晨都会从江对岸游到岛上去吃草，日息而返。</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>百牛涌动，浩浩荡荡，争先恐后奔向太阳岛啃食青草，游客可在岛上近距离驻足欣赏这一生态奇观。</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>苍山巍巍、碧水荡荡、青牛悠悠、白鹭啾啾，勾勒出一幅万物谐居、生机盎然的山水诗意画卷。</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>暮色斜阳、晚霞映江，享受完丰盛的美食后，牛儿成群结队踏上返程路。</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>坐落于百牛渡江景区的田园生活馆，是集餐饮、住宿、会议、接待于一体的多功能综合服务中心</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 style="font-size: 0.4rem;margin: 10px auto;">
尊敬的 XXX 贵宾：<br>
您的专属服务人员为 xxx 电话 18022223331<br>
你的个人行程如下：<br></div>
<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 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">
<template v-if="vip.name">
<div style="font-size: 0.4rem;margin: 10px auto;">
<p>
尊敬的<b style="color: #C42C2D">{{vip.name}}</b>巡视员:</p>
<p>印象嘉陵 江，千年相如城。</p>
<p>我们怀着激动的心情，终于迎来南充市2021年嘉陵江放牛季启动仪式暨相如故城开城活动启航。我们对您的到来表示最热烈的欢迎和最诚挚的感谢。您在蓬安期间的专属服务人员是：<b style="color: #C42C2D">{{vip.workername}}</b>，联系电话：<b style="color: #C42C2D">{{vip.workerphone}}</b>。如您有需要的地方，我们随时竭诚为您服务。</p>
<p>
为了您能够在蓬安享受更加热情周到的服务，我们特地为您梳理具体行程如下：
</p>
</div>
</template>
<div class="xc-tip">
<div class="sc-tip-img"></div>
<span>4.29行程（星期四）</span>
</div>
<div class="xc-item" v-for="item in vip.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 class="xc-item-text">{{item.text}}</div>
</div>
</div>
</div>
</div>
<div class="link-img-box">
<div class="link-img"></div>
<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>4.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 class="xc-box">
<div class="xc-tip">
<div class="sc-tip-img"></div>
<span>4.30行程（星期五）</span>
</div>
<div class="xc-item" v-for="item in vip.xcAttr2" :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="bottom-bg-box">
<div class="niu2-img">
<img src="img/2niu.png" alt="" srcset="">
</div>
<div></div>
<div class="niu2-img">
<img src="img/2niu.png" alt="" srcset="">
</div>
<div></div>
</div>
<div style="font-size: 0.24rem;width: 100%;margin: 0 auto;text-align: center;color:#ffffff;background-color:#000000;">
技术支持：中国电信股份有限公司南充分公司
</div>
<div style="font-size: 0.24rem;width: 100%;margin: 0 auto;text-align: center;color:#ffffff;background-color:#000000;">技术支持：中国电信股份有限公司南充分公司</div>
</div>
</div>
</body>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
// rem单位换算
(function (doc, win) {
console.log('doc.documentElement')
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);
// rem单位换算
(function (doc, win) {
console.log('doc.documentElement')
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>
<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: '由工作人员引领，在牛街停车场乘坐（）号车返回酒店休息。'
},
],
vip:{
name:'',
workername:'',
workerphone:'',
xc1:'',
xc2:'',
xc3:'',
xc4:'',
xc5:'',
xc6:'',
xc7:'',
xc8:'',
xc9:'',
xc10:'',
xc11:'',
xc12:'',
xc13:'',
}
}
},
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: '取消输入'
}); */
});
},
// import img_url from 'img/2-1.png'
new Vue({
el: '#app',
data: function () {
return {
visible: false,
vip: {
name: '',
workername: '',
workerphone: '',
xcAttr1: [{
title: '15:00—18:00 报到入住。',
text: ''
},
{
title: '18:30 举行欢迎晚宴。',
text: '。'
},
{
title: '19:30 出发前往相如故城。请您在百牛渡江民宿楼下集合乘车前往相如故城，车程约20分钟。',
text: ''
},
{
title: '20:00 夜游相如故城。请您跟随团队一起，在相如故城观光影，时长约50分钟。',
text: ''
},
{
title: '20:50 出发前往百牛渡江。请您在相如故城南门广场乘车，前往百牛渡江景区，车程约20分钟。',
text: ''
},
{
title: '21:10 品小吃、观光影。请您下车后，在工作人员引领下，参加品美食、观光影活动，时长约1个小时20分钟。',
text: ''
},
{
title: '22:30 结束返程。请您原车返回下榻酒店。',
text: ''
},
],
xcAttr2: [{
title: '07:00 早餐。请您在酒店自助餐区用餐。',
text: ''
},
{
title: '07:30 出发前往百牛渡江景区。请在住宿酒店楼下，乘车前往百牛渡江景区，车程约20分钟。',
text: '。'
},
{
title: '08:00 参加放牛季启动仪式。下车后，请在工作人员引领下，前往活动现场，活动时长约50分钟。',
text: ''
},
{
title: '08:50 乘船前往相如故城。请您在工作人员引导下，前往相如故城，行程约30分钟。',
text: ''
},
{
title: '10:00 参加开城活动。下船后，在工作人员引领下，参加相如故城开城活动，时长约1个小时。',
text: ''
},
{
title: '11:00 游览相如故城。',
text: ''
},
{
title: '12:00 返回酒店。',
text: ''
},
{
title: '13:30 活动结束。',
text: ''
},
],
}
}
},
mounted: function () {
this.$nextTick(function () {
this.vip=vips[this.getQueryVariable("id")-1];
})
},
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: '取消输入'
// }); */
// });
// },
getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
},
})
},
})
</script>
</html>
page/index.js
View file @ 67a8b814
......@@ -9,12 +9,24 @@
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
// 利用rem布局，根据公式
// html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度
// 计算html元素的font-size,使1rem等于100px,方便快速开发
// 利用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
})(document, window);
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
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