Skip to content

P
penganfangniujie
Commit 2ab79425 authored by 李波's avatar 李波
Browse files
Options

2021-04-26

parent a6d85097
Show whitespace changes
Inline Side-by-side
Showing with 361 additions and 85 deletions
.idea/deployment.xml 0 → 100644
View file @ 2ab79425
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PublishConfigData">
<serverData>
<paths name="121.4.15.50">
<serverdata>
<mappings>
<mapping local="$PROJECT_DIR$" web="/" />
</mappings>
</serverdata>
</paths>
<paths name="dcdbweb">
<serverdata>
<mappings>
<mapping local="$PROJECT_DIR$" web="/" />
</mappings>
</serverdata>
</paths>
</serverData>
</component>
</project>
\ No newline at end of file
.idea/misc.xml 0 → 100644
View file @ 2ab79425
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 2ab79425
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/penganfangniujie.iml" filepath="$PROJECT_DIR$/.idea/penganfangniujie.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/penganfangniujie.iml 0 → 100644
View file @ 2ab79425
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
View file @ 2ab79425
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
.idea/workspace.xml 0 → 100644
View file @ 2ab79425
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="f0421ba8-2ee0-449a-9a4a-029934c6b8ab" name="默认更改列表" comment="">
<change afterPath="$PROJECT_DIR$/.idea/deployment.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/penganfangniujie.iml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/page/img/2-2-1.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/page/img/2-2-2.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/page/img/video.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/page/img/xc-title@2x.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/page/img/xc-title@3x.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/page/img/xc-title.png" beforeDir="false" afterPath="$PROJECT_DIR$/page/img/xc-title.png" 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/mgXc.html" beforeDir="false" afterPath="$PROJECT_DIR$/page/mgXc.html" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileEditorManager">
<leaf>
<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="-2418">
<caret line="221" column="40" selection-start-line="221" selection-start-column="40" selection-end-line="221" selection-end-column="40" />
<folding>
<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>
</leaf>
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>xcAttr1</find>
</findStrings>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/page/index.html" />
</list>
</option>
</component>
<component name="ProjectConfigurationFiles">
<option name="files">
<list>
<option value="$PROJECT_DIR$/.idea/penganfangniujie.iml" />
<option value="$PROJECT_DIR$/.idea/vcs.xml" />
<option value="$PROJECT_DIR$/.idea/misc.xml" />
<option value="$PROJECT_DIR$/.idea/modules.xml" />
<option value="$PROJECT_DIR$/.idea/deployment.xml" />
</list>
</option>
</component>
<component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="-8" />
<option name="y" value="-8" />
<option name="width" value="1386" />
<option name="height" value="788" />
</component>
<component name="ProjectView">
<navigator proportions="" version="1">
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="penganfangniujie" type="b2602c69:ProjectViewProjectNode" />
<item name="penganfangniujie" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="penganfangniujie" type="b2602c69:ProjectViewProjectNode" />
<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>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
<property name="WebServerToolWindowFactoryState" value="true" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/../diancanpingtai" />
<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="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="SvnConfiguration">
<configuration />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="f0421ba8-2ee0-449a-9a4a-029934c6b8ab" name="默认更改列表" comment="" />
<created>1619449663855</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1619449663855</updated>
<workItem from="1619449668450" duration="1365000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="1365000" />
</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 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 anchor="bottom" id="Version Control" visible="true" />
<window_info anchor="bottom" id="Terminal" />
<window_info anchor="bottom" id="Event Log" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="right" id="Remote Host" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout>
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/page/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-2418">
<caret line="221" column="40" selection-start-line="221" selection-start-column="40" selection-end-line="221" selection-end-column="40" />
<folding>
<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>
</component>
</project>
\ No newline at end of file
page/img/xc-title.png
View replaced file @ a6d85097 View file @ 2ab79425
page/img/xc-title.png

161 KB | W: | H:

page/img/xc-title.png

24.8 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/index.css
View file @ 2ab79425
html {
font-size: 100px;
}
body {
margin: 0;
background-color: #F0F0F0;
......@@ -48,8 +51,8 @@ body {
line-height: 0.7rem;
background: url(img/xc-bg.png) center center no-repeat;
background-size: cover;
position: absolute;
top: 75%;
position: fixed;
top: 50%;
right: 0;
z-index: 999;
-webkit-animation: moveFromTop 1s ease both;
......@@ -78,7 +81,6 @@ body {
.active-img-box {
width: 5rem;
height: 2.9rem;
border-radius: 10px 10px 0px 0px;
overflow: hidden;
position: relative;
}
......@@ -122,6 +124,7 @@ body {
.banner-img-box {
width: 100%;
height: 3.2rem;
border-radius: 10px 10px 0px 0px;
}
.xc-box-1 {
position: relative;
......@@ -217,10 +220,11 @@ body {
}
.bottom-bg-box {
position: relative;
height: 3.8rem;
}
.niu2-img{
width: 100%;
height: 6.6rem;
/* height: 6.6rem; */
position: absolute;
top: -2.2rem;
}
......
page/index.html
View file @ 2ab79425
......@@ -4,31 +4,15 @@
<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">
<link rel="stylesheet" href="index.css?v=DHtM0X0Tzr6SroPwd4d">
<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>
......@@ -37,12 +21,42 @@
<div id="app">
<!-- 视频 -->
<div class="video-box">
<video width="100%" controls>
<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 videoPlay(isPlay) {
var media = document.getElementById('myVideo');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}
autoPlayVideo();
</script>
<!-- 百牛渡江 天下奇观 -->
<div class="full-box">
<img src="img/1.png" alt="" srcset="" class="full-img">
......@@ -52,7 +66,7 @@
</div>
<!-- 卡片加文字 走马灯 -->
<div>
<el-carousel :interval="2000" type="card" height="530px">
<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">
......@@ -61,8 +75,8 @@
<img src="img/border-img.png" alt="" srcset="" class="border-img">
</div>
<div class="text-box">
<h6>放牛节仪式</h6>
<p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
<h6>文艺演出</h6>
<p>每年的放牛季启动仪式，都会如期上演各类歌舞节目，美轮美奂、异彩纷呈。</p>
</div>
</div>
</el-carousel-item>
......@@ -70,12 +84,12 @@
<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/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>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
<h6>牛街民俗展演</h6>
<p>在牛街，随处可见船工号子、彩牛巡街、金钱板等特色民俗展演活动，让游客能切身感受到本地乡风民俗。</p>
</div>
</div>
</el-carousel-item>
......@@ -83,25 +97,25 @@
<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/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>
<h6>趣味运动会</h6>
<p>游客可登上太阳岛参与各种趣味活动，在愉悦身心的同时还有机会赢得蓬安特产大礼包</p>
</div>
</div>
</el-carousel-item>
<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/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>
<h6>文艺演出</h6>
<p>每年的放牛季启动仪式，都会如期上演各类歌舞节目，美轮美奂、异彩纷呈。</p>
</div>
</div>
</el-carousel-item>
......@@ -109,7 +123,7 @@
<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/2-4.png" alt="" srcset="" class="active-img">
<img src="img/border-img.png" alt="" srcset="" class="border-img">
</div>
<div class="text-box">
......@@ -117,12 +131,13 @@
<p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
</div>
</div>
</el-carousel-item>
</el-carousel-item> -->
</el-carousel>
</div>
<!-- 轮播 -->
<div class="banner-box">
<el-carousel indicator-position="outside" height="564px">
<el-carousel indicator-position="outside" height="5.64rem">
<el-carousel-item>
<div class="active-item">
<div class="active-img-box banner-img-box">
......@@ -130,8 +145,8 @@
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div>
<div class="text-box">
<h6>放牛节仪式</h6>
<p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
<h6>放牛季启动仪式</h6>
<p>嘉陵江放牛季活动创办于2010年，是蓬安乃至南充最重要的文旅活动之一，每年四月的最后一个周末正式开启，已连续成功举办11届。</p>
</div>
</div>
</el-carousel-item>
......@@ -142,8 +157,8 @@
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div>
<div class="text-box">
<h6>放牛节仪式</h6>
<p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
<h6>太阳岛、月亮岛</h6>
<p>蜿蜒嘉陵江流经蓬安后，由于江水冲刷、泥沙沉积，形成2个巨大的江中岛屿，即太阳岛和月亮岛，放牛季期间，数百头牛每天清晨都会从江对岸游到岛上去吃草，日息而返。</p>
</div>
</div>
</el-carousel-item>
......@@ -154,8 +169,8 @@
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div>
<div class="text-box">
<h6>放牛节仪式</h6>
<p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
<h6>丰草迎牛奔</h6>
<p>百牛涌动，浩浩荡荡，争先恐后奔向太阳岛啃食青草，游客可在岛上近距离驻足欣赏这一生态奇观。</p>
</div>
</div>
</el-carousel-item>
......@@ -166,8 +181,8 @@
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div>
<div class="text-box">
<h6>放牛节仪式</h6>
<p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
<h6>牛鸟谐居</h6>
<p>苍山巍巍、碧水荡荡、青牛悠悠、白鹭啾啾，勾勒出一幅万物谐居、生机盎然的山水诗意画卷。</p>
</div>
</div>
</el-carousel-item>
......@@ -178,8 +193,8 @@
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div>
<div class="text-box">
<h6>放牛节仪式</h6>
<p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
<h6>放牛晚归</h6>
<p>暮色斜阳、晚霞映江，享受完丰盛的美食后，牛儿成群结队踏上返程路。</p>
</div>
</div>
</el-carousel-item>
......@@ -190,8 +205,8 @@
<img src="img/border-img-lang.png" alt="" srcset="" class="border-img">
</div>
<div class="text-box">
<h6>放牛节仪式</h6>
<p>嘉陵江放牛节创办于2010年， 每年4月最后一个周末举办 拷贝 3</p>
<h6>田园生活馆</h6>
<p>坐落于百牛渡江景区的田园生活馆，是集餐饮、住宿、会议、接待于一体的多功能综合服务中心</p>
</div>
</div>
</el-carousel-item>
......@@ -204,6 +219,10 @@
</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>
......@@ -213,7 +232,7 @@
<span class="item-tip-icon"></span>
<span>{{item.title}}</span>
</div>
<!-- <div class="xc-item-text">{{item.text}}</div> -->
<div class="xc-item-text">{{item.text}}</div>
</div>
</div>
</div>
......@@ -225,14 +244,14 @@
<div class="xc-box">
<div class="xc-tip">
<div class="sc-tip-img"></div>
<span>5.30行程（星期五）</span>
<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-item-text">{{item.text}}</div>
</div>
</div>
</div>
......@@ -240,7 +259,9 @@
<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>
</body>
......@@ -248,18 +269,27 @@
<!-- 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';
// 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'
......
page/mgXc.html
View file @ 2ab79425
......@@ -4,12 +4,18 @@
<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">
<link rel="stylesheet" href="index.css?v=DHtM0X0Tzr6SroPwd4d">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script>
// rem单位换算
(function (doc, win) {
window.onload = function (doc, win) {
console.log('doc.documentElement')
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
......@@ -27,7 +33,7 @@
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
}(document, window);
</script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
......
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