Vue实现去哪网详情手机模块静态网页如下：
img图片如下👇：
代码实例👇：
css部分：
html{
font-size: 50px;
}
body{
font-size: .28rem;
background-color: #ccc;
}
*{
margin: 0;
padding: 0;
list-style: none;
vertical-align: middle;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
#box{
background-color: rgb(234, 234, 234);
}
.box_son_img{
position: relative;
}
.box_son_img img{
width: 100%;
}
#box_son_p{
position: absolute;
bottom: .1rem;
}
.box_son_p_first{
font-size: .2rem;
border-radius: .4rem;
padding: .01rem .2rem;
margin: 0 .2rem;
color: white;
width: .5rem;
height: .4rem;
background-color: rgba(0,0,0,0.7);
}
.box_son_p_bottom{
font-size: .4rem;
color: white;
padding: .2rem;
}
.box_idtion{
background-color: white;
padding-top: .1rem;
border-top-left-radius: .2rem;
border-top-right-radius: .2rem;
width: 100%;
}
.box_idtn_left{
float: left;
width: 45%;
padding-right: 5%;
}
.box_idth_left{
float: left;
}
.idth_p1{
padding-left: .2rem;
font-size: .2rem;
vertical-align: bottom;
padding-bottom: .1rem;
}
.box_idtn_right{
float: left;
width: 45%;
padding-right: 5%;
}
.idth_span{
font-size: .4rem;
color: #ff8300;
}
.idth_span1{
font-size: .2rem;
color: #ff8300;
vertical-align: bottom;
padding-bottom: .1rem;
}
.idth_span2{
font-size: .2rem;
color: #FF8300;
vertical-align: bottom;
padding-bottom: .1rem;
}
.box_idth_right{
line-height: .9rem;
float: right;
font-size: .4rem;
color: darkgray;
}
.idth_p2{
/* padding-top: .1rem; */
padding-left: .2rem;
font-size: .2rem;
color: darkgray;
}
.idth_p3{
padding-left: .2rem;
font-size: .3rem;
vertical-align: bottom;
padding-top: .1rem;
padding-bottom: .2rem;
}
.box_idth_bottom{
float: left;
width: 100%;
height: .4rem;
padding: .2rem 0;
}
.idth_botm_span{
padding: 0 .4rem;
}
.box_son_da{
font-size: .4rem;
padding-right: .4rem;
float: right;
}
#box_son_price{
background-color: white;
padding: .2rem;
margin-top: .3rem;
}
.box_price_p{
font-weight: bold;
font-size: .4rem;
}
.box_price_piao{
padding: .2rem 0;
width: 100%;
border-radius: .1rem;
}
.box_piao{
padding: .2rem 0;
white-space: normal;
}
.box_piao_left{
width: 60%;
overflow: hidden;
-webkit-line-clamp: 3;
float: left;
}
.box_piao_left div{
padding: .09rem;
}
.box_piao_left_top{
font-size: .3rem;
}
.box_piao_img{
width: .2rem;
height: .2rem;
}
.box_piao_left_middle{
font-size: .2rem;
color: #00afc7;
}
.box_piao_left_bottom{
font-size: .2rem;
}
.box_piao_left_bottom span{
display: inline-block;
border: 1px solid #00AFC7;
padding: .02rem;
border-radius: .1rem;
}
.box_piao_right{
float: right;
padding: .2rem;
width: 30%;
}
.box_piao_right_top{
text-align: center;
color: #FFAB1E;
font-size: .4rem;
}
.box_piao_right_top i{
display: inline-block;
font-style: normal;
font-size: .28rem;
height: .45rem;
}
.box_piao_right_bottom{
width: 2rem;
height: .4rem;
border-radius: .3rem;
background-color: #ffab1e;
padding: .1rem .5rem;
text-align: center;
color: white;
font-weight: 600;
}
.box_bottom{
padding: .2rem;
margin-top: .2rem;
background: white;
}
.box_h{
/* padding: .2rem; */
font-size: .4rem;
font-weight: 600;
}
.box_small_color{
border-radius: .05rem;
display: inline-block;
width: .1rem;
height: .35rem;
background-color: #00AFC7;
}
.box_small_span{
display: inline-block;
padding: .2rem;
font-size: .35rem;
font-weight: 500;
}
.box_bottom_box{
border: 1px solid rgb(234, 234, 234);
margin: .1rem;
border-radius: .3rem;
}
.box_bottom_li{
border-bottom: 1px solid #ccc;
padding: .3rem 0;
}
.bottom_li_span{
float: left;
font-size: .32rem;
padding: .2rem .2rem;
}
.bottom_li_span1{
padding: .2rem .5rem;
float: right;
}
.bottom_li_span1 i{
font-style: normal;
font-size: .25rem;
color: #ffab1e;
display: inline-block;
vertical-align: bottom;
}
.bottom_li_i{
font-size: .4rem !important;
}
.bottom_li_img{
width: .5rem;
}
html+vue部分👇：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="vue.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="去哪网样式.css"/>
</head>
<body>
<div id="box">
<div class="box_son">
<div class="box_son_img">
<img src="img/1.jpg" >
<div id="box_son_p">
<p class="box_son_p_first"><span></span><span>12</span></p>
<p class="box_son_p_bottom">故宫(AAAAA景区)</p>
</div>
</div>
<div class="box_idtion clearfix">
<div class="box_idtn_left clearfix">
<div class="box_idth_left">
<p class="idth_p1">
<span class="idth_span">5.0</span>
<span class="idth_span2">分</span>
<span class="idth_span1">超赞</span>
</p>
<p class="idth_p2">
<span>639299条评论</span>
<span>103条攻略</span>
</p>
</div>
<div class="box_idth_right">></div>
</div>
<div class="box_idtn_right">
<div class="box_idth_left">
<p class="idth_p3">
景点介绍
</p>
<p class="idth_p2">
开放时间、贴士
</p>
</div>
<div class="box_idth_right">></div>
</div>
<div class="box_idth_bottom">
<span class="icon"></span>
<span class="idth_botm_span">北京市东城区景山前街四号</span>
<span class="box_son_da">></span>
</div>
</div>
</div>
<div id="box_son_price">
<div class="box_son_price_top">
<p class="box_price_p">去哪儿推荐</p>
</div>
<div class="box_price_piao">
<div is="pice_li" v-for="(item,index) in cent" :key="index" :item="item" :index="index"></div>
</div>
</div>
<div is="piao_li" v-for="(item,index) of h" :key="index" :item="item" :index="index"></div>
</div>
<script type="text/javascript">
Vue.component('pice_li',{
props:["item","index"],
data(){
return{
tiem:[
'23:30前可订明日',
'23:30前可订明日',
'23:30前可订明日',
],
price:[
60,
20,
30
]
}
},
template:`<div class="box_piao clearfix">
<div class="box_piao_left">
<div class="box_piao_left_top">{{item}}</div>
<div class="box_piao_left_middle"><img src="img/1.png" class="box_piao_img" >{{tiem[index]}}</div>
<div class="box_piao_left_bottom">
<span>随时退</span>
<span>无需换票</span>
</div>
</div>
<div class="box_piao_right">
<p class="box_piao_right_top"><i>￥</i>{{price[index]}}</p>
<p class="box_piao_right_bottom">立即订购</p>
</div>
</div>`
})
Vue.component('piao_li',{
props:['item','index'],
data(){
return{
h1:[
[
'故宫上午场门票',
'故宫下午场门票'
],
[
'故宫+珍宝馆+钟表馆+人工讲解',
'故宫+珍宝馆+人工讲解',
'故宫+珍宝馆+钟表馆+电子导览'
],
[
'故宫+珍宝馆+钟表馆',
'故宫+珍宝馆',
'故宫+钟表馆'
],
[
'故宫+人工讲解',
'故宫+精品人工讲解',
'故宫+电子导览',
'故宫+资深人工讲解'
],
[
'故宫清宫/汉服服饰+道具+配饰+妆容+发型体验'
],
[
'推车/轮椅出租',
'印章'
],
[
'门票+活动体验票'
],
[
'故宫门票+冰窖餐厅+精品小团人工讲解'
],
[
'特色人工讲解',
'人工讲解',
'手机讲解',
'故宫精品人工讲解服务'
],
[
'故宫冰窖餐厅+精品小团人工讲解'
],
[
''
]
],
piao:[
[
[
'成人票',
'学生票',
'老人票'
],
[
'成人票',
'学生票',
'老人票'
]
],
[
[
'成人票',
'学生票',
'老人票'
],
[
'成人票',
'学生票',
'老人票'
],
[
'成人票',
'老人票'
]
],
[
[
'成人票',
'学生票',
'老人票'
],
[
'成人票',
'学生票',
'老人票'
],
[
'成人票',
'学生票',
'老人票'
]
],
[
[
'成人票',
'学生票',
'老人票'
],
[
'成人票'
],
[
'成人票'
],
[
'成人票',
'老人票',
'优待票'
]
],
[
[
'成人票'
]
],
[
[
'成人票（手推轮椅）',
'儿童票（儿童推车）'
],
[
'大小同价'
]
],
[
[
'成人票',
'学生票'
]
],
[
[
'老人票',
'儿童票',
'学生票',
'成人票'
]
],
[
[
'大小同价（“秀才说”网红导游讲解下午场）',
'大小同价（“上朝啦”精品人工讲解）',
'大小同价（大内御讲）'
],
[
'大小同价',
],
[
'大小同价（中文）',
'大小同价（英文）'
],
[
'大小同价',
]
],
[
[
'儿童票'
]
],
[
[
'【北京出发】慕田峪长城+故宫1日游',
'【北京出发】毛主席纪念堂+加中国国家博物馆+天安门广场+人民英雄纪念碑+故宫1日游',
'【北京出发】故宫+珍宝馆+钟表馆1日游'
]
]
]
}
},
template:`<div class="box_bottom">
<div class="box_h">{{item}}</div>
<div v-for="(item,indeex) of h1[index]">
<div class="box_h_small">
<span class="box_small_color"></span>
<span class="box_small_span">{{item}}</span>
</div>
<div class="box_bottom_box">
<div class="box_bottom_li clearfix" v-for="(items,index) of piao[index][indeex]">
<span class="bottom_li_span">{{items}}</span>
<span class="bottom_li_span1">
<i>￥</i>
<i class="bottom_li_i">57.4</i>
<i>起</i>
<i><img src="img/2.png" class="bottom_li_img"></i>
</span>
</div>
</div>
</div>
</div>`
})
var app = new Vue({
el:'#box',
data:{
cent:[
'【全天票】故宫成人票【刷证件入园，全天可进】',
'北京故宫上午学生票',
'北京故宫上午老人票',
],
h:[
'景区门票',
'门票+内馆+导览',
'门票+内馆',
'门票+导览',
'景点内馆',
'景区服务',
'门票+项目',
'门票+餐饮+导览',
'景点导览',
'餐饮+导览',
'一日游'
]
}
})
</script>
</body>
</html>
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
