*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100px;
}
body {
font-size: .22rem;
}
.footer {
width: 100%;
height: 100px;
}
#app{
width: 375px;
}
.content {
width: 7.2rem;
background-color: #f5f5f5;
margin: 0 auto;
overflow: auto;
}
.footer {
width: 100%;
/*height: 100px;*/
display: flex;
height: 60px;
}
.footer a {
/*height: 100px;*/
width: 25%;
/*line-height: 100px;*/
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-decoration: none;
}
.footer .normal {
color: #999;
}
.footer .active {
color: #00a4ff;
}
.footer a i {
display: block;
padding-top: 20px;
/*height: 50px;*/
width: 100%;
/*padding-top: 25px;*/
text-align: center;
}
.footer a span {
display: block;
/*height: 50px;*/
width: 100%;
/*line-height: 25px;*/
/*padding-bottom: 25px;*/
text-align: center;
}
.swapper7{
width: 100%;
height: 1300px;
position: relative;
text-decoration: none;
}
.swapper7 .cxk{
width: 100%;
height: 190px;
margin-top: 10px;
background-color: #FFFFFF;
}
.cxk .photo{
width: 40px;
height: 40px;
margin-left: 15px;
margin-top: 15px;
/*background-color: blue;*/
display: inline-block;
}
/*.photo img{*/
/*width: 82px;*/
/*height: 82px;*/
/*display: inline-block;*/
/*}*/
.cxk a{
text-decoration: none;
}
.pop{
width: 315px;
height: 82px;
/*background-color: yellow;*/
display: inline-block;
vertical-align:top;
margin-top: 3px;
position: relative;
}
.play{
width: 200px;
height: 32px;
position: relative;
display: inline-block;
bottom: 8px;
}
.play i{
position: absolute;
bottom: 12px;
}
/*.cxk h3{*/
/*display: inline-block;*/
/*width: 165px;*/
/*height: 32px;*/
/*vertical-align: top;*/
/*margin-left: 10px;*/
/*overflow: hidden;*/
/*text-overflow: ellipsis;*/
/*white-space: nowrap;*/
/*}*/
.cxk .game{
font-size: 0.34rem;
display: inline-block;
color: #333;
font-weight: 700;
/*margin-top: 10px;*/
display: inline-block;
width: 165px;
height: 32px;
vertical-align: top;
margin-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cxk .aline{
width: 300px;
height: 17px;
/*background-color: blue;*/
display: inline-block;
color: #999999;
position: absolute;
top:42px ;
right: 4px;
}
/*.aline div{*/
/*width: 310px;*/
/*height: 17px;*/
/*}*/
.pop .index-omit_1q3Tw0_{
display: inline-block;
margin-left: 10px;
margin-top: 15px;
color: #333333;
font-size: .3rem;
}
.momo{
width: 310px;
height: 17px;
color: #666666;
margin-top: 40px;
display: inline-block;
font-size: 0.25rem;
}
.momo .live{
width: 100px;
height: 17px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
flex: 1;
}
.momo .list{
float: right;
font-size: .3rem;
color: #333;
font-weight: 700;
}
/*.last{*/
/*width: 320px;*/
/*height: 85px;*/
/*}*/
.cxk .ctrl{
width: 310px;
height: 20px;
margin-top: 5px;
margin-left: 15px;
}
.ctrl span{
text-decoration: none;
color: #666666;
}
.center{
width: 100%;
height: 50px;
/*margin-left: 30px;*/
display: inline-block;
}
.center .center1{
padding:3px 8px 3px 8px;
border: 1px solid #2395ff;
border-radius:4px;
background-color: transparent;
outline: none;
font-size:0.25rem;
color: #2395ff;
margin-left:190px;
margin-top:45px;
display: inline-block;
}
.center .center2{
padding:4px 10px 4px 10px;
border: 1px solid #ff5339;
border-radius:4px;
background-color: transparent;
outline: none;
font-size:0.25rem;
color: #ff5339;
margin-top: 7px;
}
.play i{
color: #999999;
}
var vm = new Vue({
el: "#app",
data: {
skys: [
{
name: "粥宫壹号(软三中交和美店)",
img: "https://fuss10.elemecdn.com/f/2b/ba1f5303be51b51ece5bc74d01f71jpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",
img1: "",
name1: "20小时40分钟前",
name4: "订单已送达",
name5:"fa fa-chevron-right",
name6: "小肠粥等2件商品",
name7: "再来一单",
name8: "¥11.90",
name11: "评价获得金币",
},
{
name: "永悦福餐厅",
img: "https://fuss10.elemecdn.com/c/cc/a0e70e92b62f9aaf61ce3f784acd3jpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",
name1: "16小时27分钟前",
name4: "订单已送达",
name5:"fa fa-chevron-right",
name6: '卤鸭+饭+配菜+饮料',
name7: "再来一单",
name8: "¥12.40",
name11: "评价获得金币",
},
{
name: "一品便当",
img: "https://fuss10.elemecdn.com/a/d3/470476c466613e1c589e05b02370apng.png?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",
name1: "18小时16分钟前",
name4: "订单已送达",
name5:"fa fa-chevron-right",
name6: '水煮肉片饭要自己点哦等2件商品',
name7: "再来一单",
name8: "¥13.40",
name11: "评价获得金币",
},
{
name: "南嘟猪脚饭(软件园三期店)",
img: "https://fuss10.elemecdn.com/b/7e/dd0e4e74eea7fdc252fe92246434djpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",
name1: "2019-06-20 17:25",
name4: "订单已送达",
name5:"fa fa-chevron-right",
name6: '\n' +
' 咸水鸭套餐+蛋+俩配菜+小菜\n' +
' ',
name7: "再来一单",
name8: "¥17.00",
name11: "评价获得金币",
},
{
name: "每天粥铺(软三店)",
img: "https://fuss10.elemecdn.com/0/b0/0ae1602d5500f34daaf0a104ecd4ejpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",
name1: "2019-06-18 08:36",
name4: "订单已送达",
name5:"fa fa-chevron-right",
name6: '韭菜盒子(2个)等2件商品',
name7: "再来一单",
name8: "¥9.90",
name11: "评价获得金币",
},
{
name: "临茶(软三店)",
img: "https://fuss10.elemecdn.com/6/0e/49940f7c531aa2b0a3c94cc08568ajpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",
name1: "2019-06-17 14:20",
name4: "订单已送达",
name5:"fa fa-chevron-right",
name6: '金钻波霸奶绿-中杯',
name7: "再来一单",
name8: "¥13.89",
name11: "评价获得金币",
},
{
name: "烧腊先生",
img: "https://fuss10.elemecdn.com/f/47/efbe487d16a8fab006add2e37a52ejpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",
name1: "2019-06-04 16:53",
name4: "订单已送达",
name5:"fa fa-chevron-right",
name6: '招牌烧鸭饭',
name7: "再来一单",
name8: "¥17.50",
name11: "评价获得金币",
}
],
items: [
{
id: 1,
photo: "fa fa-edge fa-2x",
name: "首页",
normal: false,
active: true,
url:"饿了么.html"
},
{
id: 2,
photo: "fa fa-compass fa-2x",
name: "发现",
normal: true,
active: false
},
{
id: 3,
photo: "fa fa-file-text-o fa-2x",
name: "订单",
normal: true,
active: false,
},
{
id: 4,
photo: "fa fa-user fa-2x",
name: "我的",
normal: true,
active: false,
url:"登录.html"
}
],
},
methods: {
active: function (index) {
var i = 0;
for (; i < this.items.length; i++) {
if (this.items[i].id != this.items[index].id) {
this.items[i].normal = true;
this.items[i].active = false;
}
}
this.items[index].normal = false;
this.items[index].active = true;
},
late: function (change) {
this.change = change;
}
},
})
function resizei() {
var fs_maxrem = 100;
var max_width = 720;
var w_width = window.innerWidth;//获取窗口宽度
var fsrem = 100;//表示当前的大小
if (w_width > max_width) {//如果超过最大值，则fs保持最大值
fsrem = fs_maxrem;
} else {
fsrem = fs_maxrem * w_width / max_width;//根据当前的屏幕大小得到当前的fsrem
}
document.documentElement.style.fontSize = fsrem + "px";
}
resizei();
//添加窗口大小改变的事件
window.onresize = function () {
resizei();
}
function peizhi() {
//1.设置body高度等于window高度
var height = window.innerHeight;
document.body.style.height = height + "px";
document.body.style.backgroundColor = "";
//2. 设置content块等于body的高度减去一头一尾的高度
var content_height = 0;
content_height = height - 0 - 60;
var contentDom = document.querySelector(".content");
contentDom.style.height = content_height + "px";
}
window.onload = function () {
peizhi()
}
window.onresize = function () {
peizhi()
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史
1622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
