lee first
commit
78ee899096
|
|
@ -0,0 +1,97 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "微软雅黑", Helvetica, STHeiTi, sans-serif;
|
||||
-webkit-text-size-adjust: 100% !important; /*禁止IOS调整字体大小*/
|
||||
max-width: 750px;
|
||||
margin: 0 auto;
|
||||
font-size: 0.14rem;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
ul,ol,li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
|
||||
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
|
||||
text-decoration: none;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0; /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
|
||||
vertical-align: middle; /* 取消图片底侧有空白缝隙的问题 ① */
|
||||
object-fit: cover; /* 取消图片底侧有空白缝隙的问题 ② */
|
||||
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
|
||||
text-decoration: none;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
button,input,select,textarea {
|
||||
border: 0; /* 去掉边框 */
|
||||
background: none; /* 去掉背景 */
|
||||
-webkit-appearance: none; /*去掉webkit默认的表单样式*/
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
color: #ccc; /*修改webkit中input的planceholder样式*/
|
||||
}
|
||||
|
||||
input:focus::-webkit-input-placeholder {
|
||||
color: #f00; /*修改webkit中focus状态下input的planceholder样式*/
|
||||
}
|
||||
|
||||
/* flex布局 */
|
||||
.flex {display: flex;}
|
||||
|
||||
/* 盒模型 */
|
||||
.border-box{box-sizing: border-box;}
|
||||
|
||||
/* 圆角 */
|
||||
.radius10{border-radius: .10rem;}
|
||||
.radius15{border-radius: .15rem;}
|
||||
.radius20{border-radius: .20rem;}
|
||||
.radius25{border-radius: .25rem;}
|
||||
.radius30{border-radius: .30rem;}
|
||||
.radius35{border-radius: .35rem;}
|
||||
.radius40{border-radius: .40rem;}
|
||||
.radius45{border-radius: .45rem;}
|
||||
.radius50{border-radius: .50rem;}
|
||||
.radius100{border-radius: 100%;}
|
||||
|
||||
/* 字体 */
|
||||
.font18{ font-size: .18rem;}
|
||||
.font20{ font-size: .20rem;}
|
||||
.font22{ font-size: .22rem;}
|
||||
.font24{ font-size: .24rem;}
|
||||
.font26{ font-size: .26rem;}
|
||||
.font28{ font-size: .28rem;}
|
||||
.font30{ font-size: .30rem;}
|
||||
.font32{ font-size: .32rem;}
|
||||
.font34{ font-size: .34rem;}
|
||||
.font36{ font-size: .36rem;}
|
||||
.font38{ font-size: .38rem;}
|
||||
.font40{ font-size: .40rem;}
|
||||
.font42{ font-size: .42rem;}
|
||||
.font44{ font-size: .44rem;}
|
||||
.font46{ font-size: .46rem;}
|
||||
.font48{ font-size: .48rem;}
|
||||
.font60{ font-size: .60rem;}
|
||||
|
||||
/* 文字行数 */
|
||||
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
.header{
|
||||
align-items: center;
|
||||
width: 7.5rem;
|
||||
height: .94rem;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.header-back{
|
||||
justify-content: center;
|
||||
width: .6rem;
|
||||
height: .4rem;
|
||||
}
|
||||
.header-back>img{
|
||||
width: .4rem;
|
||||
height: .4rem;
|
||||
}
|
||||
.header-title{
|
||||
width: calc(100% - 1.2rem);
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
letter-spacing: .04rem;
|
||||
text-indent: .04rem;
|
||||
}
|
||||
|
||||
/* 轮播图 */
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 3.64rem;
|
||||
margin-top: .94rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.banner img{
|
||||
width: 100%;
|
||||
min-height: 3.64rem;
|
||||
}
|
||||
|
||||
/* 首页内容区 */
|
||||
.index-content{
|
||||
background-color: #fed7b0;
|
||||
padding: .45rem .2rem;
|
||||
border-top: .02rem solid #eeb94f;
|
||||
}
|
||||
|
||||
/* 活动 */
|
||||
.index-activity{
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: .48rem .32rem;
|
||||
border: .1rem solid #fff0a3;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.envelopes{
|
||||
width: 2.8rem;
|
||||
height: 3.66rem;
|
||||
background-image: url(../images/envelopes.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.envelopes>span{
|
||||
display: block;
|
||||
font-size: .64rem;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
margin-top: 1.7rem;
|
||||
color: #ffebac;
|
||||
}
|
||||
.envelopes>a{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(100% - .52rem);
|
||||
height: .58rem;
|
||||
background-image: linear-gradient(to top,#fed383,#fdf0c2);
|
||||
margin: .15rem auto 0;
|
||||
color: #ec294c;
|
||||
animation: scale_name 1s linear alternate infinite;
|
||||
}
|
||||
@keyframes scale_name{
|
||||
from{transform: scale(.95);}
|
||||
to{transform: scale(1.05);}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 525 B |
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<title>万安优惠券</title>
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<!-- css加载 -->
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/swiper-bundle.min.css">
|
||||
<!-- js加载 -->
|
||||
<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 头部 -->
|
||||
<div class="header flex">
|
||||
<div class="header-back flex" onclick="window.history.go(-1)">
|
||||
<img src="images/icon/icon-back.png" alt="返回">
|
||||
</div>
|
||||
<div class="header-title font38">活动领券</div>
|
||||
</div>
|
||||
<!-- 轮播图 -->
|
||||
<div class="banner">
|
||||
<div class="banner-swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="images/banner.jpg" alt="轮播图">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="images/banner.jpg" alt="轮播图">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="images/banner.jpg" alt="轮播图">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var bannerSwiper = new Swiper('.banner-swiper', {
|
||||
loop:true,//开启循环播放
|
||||
autoplay: {//开启自动播放
|
||||
delay:3000,
|
||||
disableOnInteraction: false,//触摸后不会停止自动滚动
|
||||
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!-- 内容区 -->
|
||||
<div class="index-content border-box">
|
||||
<!-- 活动 -->
|
||||
<div class="index-activity radius40 border-box flex">
|
||||
<div class="envelopes">
|
||||
<span>17:00</span>
|
||||
<a href="" class="font26 radius20 flex">立即开枪</a>
|
||||
</div>
|
||||
<div class="envelopes">
|
||||
<span>18:00</span>
|
||||
<a href="" class="font26 radius20 flex">立即开枪</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
尾部信息
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
!(function(win, doc, orw) {
|
||||
var docEle = doc.documentElement;
|
||||
fnResetHtmlFontSize();
|
||||
function fnResetHtmlFontSize() {
|
||||
var width = docEle.clientWidth;
|
||||
if (width >= orw) {
|
||||
docEle.style.fontSize = '100px';
|
||||
} else {
|
||||
docEle.style.fontSize = (width / orw) * 100 + 'px';
|
||||
}
|
||||
}
|
||||
win.addEventListener('resize', fnResetHtmlFontSize, false);
|
||||
})(window, document, 750);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue