Skip to content

S
shop-new
提交 9f440249 authored 作者: yuanyufei's avatar yuanyufei
浏览文件
操作

响应式布局页面的优化

上级 e6d8749e
隐藏空白字符变更
内嵌 并排
正在显示 包含 80 行增加 和 51 行删除
src/views/index.vue
浏览文件 @ 9f440249
......@@ -50,7 +50,7 @@
<!-- 中间部分 -->
<div class="main">
<el-row :gutter="10">
<el-col :xs="24" :md="24" :lg="17" >
<el-col :xs="24" :lg="17" >
<div class="main-left">
<div class="main-left-top">
<el-row type="flex" justify="space-between">
......@@ -65,7 +65,7 @@
</el-col>
<el-col :span="12">
<div class="tp-img">
<img src="@/assets/image/stay.png" alt="">
<img src="@/assets/image/stay1.png" alt="" >
</div>
</el-col>
</el-row>
......@@ -82,7 +82,7 @@
</el-col>
<el-col :span="12">
<div class="tp-img">
<img src="@/assets/image/stay.png" alt="">
<img src="@/assets/image/stay2.png" alt="">
</div>
</el-col>
</el-row>
......@@ -99,7 +99,7 @@
</el-col>
<el-col :span="12">
<div class="tp-img">
<img src="@/assets/image/stay.png" alt="">
<img src="@/assets/image/stay3.png" alt="">
</div>
</el-col>
</el-row>
......@@ -116,7 +116,7 @@
</el-col>
<el-col :span="12">
<div class="tp-img">
<img src="@/assets/image/stay.png" alt="">
<img src="@/assets/image/stay4.png" alt="">
</div>
</el-col>
</el-row>
......@@ -184,7 +184,7 @@
</div>
</div>
</el-col>
<el-col :xs="24" :md="24" :lg="7" >
<el-col :xs="24" :lg="7" >
<div class="main-right">
<div class="main-right-top">
<div class="sa">常用功能</div>
......@@ -199,7 +199,7 @@
</div>
</el-col>
<el-col :span="8">
<div style="text-align:center;cursor: pointer;" @click="goMyAssets()">
<div class="main-right-top-point" style="text-align:center;cursor: pointer;" @click="goMyAssets()">
<div class="right-top-item">
<img src="@/assets/image/release.png" alt="">
</div>
......@@ -269,15 +269,15 @@
</div>
</div>
</el-col>
</el-row>
</el-row>
</div>
<!-- 底部 -->
<div class="footer">
<div class="footer-left">
<div style="margin:30px 0 0 24px;">
<span class="ft-sp">热销类目排行</span>
<el-row :gutter="10">
<el-col :xs="24" :lg="17">
<div class="footer-left">
<div style="margin:0 0 0 24px;">
<span class="footer-sp">热销类目排行</span>
<!-- <div class="main-left-foot-top">
<el-date-picker
size="mini"
......@@ -302,7 +302,7 @@
</div> -->
</div>
<el-table
style="margin-top:41px;padding:16px 16px 0;"
style="margin-top:15px;padding:16px 16px 0;"
:cell-style='changeCellStyle'
:header-cell-style="{background:'linear-gradient(0deg, #FCEBCE 0%, #FEF6E9 100%)',color:'#955300'}"
:data="cateGory">
......@@ -310,7 +310,7 @@
type="index"
label="排名"
align="center"
width="300">
width="200">
<template slot-scope="scope">
<div :class="scope.$index==0?'foot-index':'foot-indexone'">
<img src="@/assets/image/yelimg.png" alt="" v-if="(scope.$index==0)">
......@@ -322,15 +322,15 @@
<el-table-column
prop="category_name"
label="品类"
align="left"
width="250"
align="center"
min-width="30%"
>
</el-table-column>
<el-table-column
prop="num"
label="商品总数"
align="center"
width='300' >
min-width='30%' >
<template slot-scope="scope">
<div class="foot-table">
<!-- <img src="@/assets/image/all-shop.png" alt="" class="foot-table-img"> -->
......@@ -342,6 +342,7 @@
prop="sale"
align="center"
label="交易量"
min-width="25%"
>
<template slot-scope="scope">
<div class="foot-table">
......@@ -356,29 +357,33 @@
label="分类名称">
</el-table-column> -->
</el-table>
</div>
<div class="footer-right">
<div class="footer-right-top">
<span class="footer-right-top-text">商家成长</span>
<div class="footer-right-top-item">
<div class="footer-right-top-img footer-top-one" @click="openDia()">
<span>规则中心</span>
<p>GO></p></p>
</div>
<div class="footer-right-top-img footer-top-two" @click="openDia()">
<span>学习中心</span>
<p>GO></p></p>
</div>
</el-col>
<el-col :xs="24" :lg="7">
<div class="footer-right">
<div class="footer-right-top">
<span class="footer-right-top-text">商家成长</span>
<div class="footer-right-top-item">
<div class="footer-right-top-img footer-top-one" @click="openDia()">
<span>规则中心</span>
<p>GO></p></p>
</div>
<div class="footer-right-top-img footer-top-two" @click="openDia()">
<span>学习中心</span>
<p>GO></p></p>
</div>
<div class="footer-right-top-img footer-top-thr" style="margin-top:15px;"@click="openDia()">
<span>商家成长</span>
<p>GO></p></p>
</div>
</div>
</div>
<div class="footer-right-top-img footer-top-thr" style="margin-top:15px;"@click="openDia()">
<span>商家成长</span>
<p>GO></p></p>
<div class="footer-right-bot">
<img src="@/assets/image/more.png" alt="" style="width:100%;">
</div>
</div>
</div>
<div class="footer-right-bot">
<img src="@/assets/image/more.png" alt="" style="width:100%;">
</div>
</div>
</el-col>
</el-row>
</div>
<el-dialog
title="提示"
......@@ -684,15 +689,30 @@ export default {
text-align: center;
border-left: 2px solid #e6edfe;
}
@media screen and (max-width: 1000px) {
.tp-img img{
width: 50px;
@media screen and (max-width: 1600px) {
.main-left-top .tp-col .tp-img {
display: none;
}
.main-right{
margin-top: 30px;
}
@media screen and (max-width: 1200px) {
.main-left-top .tp-le{
width: 100%;
text-align: center;
}
.main-right-top,.footer-right{
margin-top: 20px;
margin-left: -15px;
}
.main-right-foot{
margin-left: -15px;
}
.footer-left{
margin-top: 20px;
}
// .main-left-top .tp-col {
// background: #ffffff;
// }
}
//中间部分
.main {
......@@ -744,16 +764,18 @@ width: 50px;
}
//右侧内容
.main-right {
z-index: 10000;
height: 592px;
margin-left: 15px;
}
.main-right-top {
height: 198px;
overflow: hidden;
// overflow: hidden;
background: #ffffff;
border-radius: 4px;
}
.main-right-top .sa {
display: inline-block;
margin: 30px 0 0 26px;
font: 400 16px/5px Alibaba PuHuiTi;
color: #000000;
......@@ -768,6 +790,9 @@ width: 50px;
background: #f0f6ff;
border-radius: 10px;
}
.main-right-top-point{
cursor: pointer;
}
.main-right-foot {
height: 374px;
margin-top: 20px;
......@@ -827,14 +852,18 @@ width: 50px;
}
//底部样式
.footer-left {
width: 74%;
height: 428px;
float: left;
height: 448px;
background: #ffffff;
border-radius: 4px;
}
.footer-left .footer-sp{
margin: 30px 0 0 23px;
display: inline-block;
font: 400 16px/5px Alibaba PuHuiTi;
color: #000000;
}
.footer-right-top {
width: 25%;
width: 100%;
height: 276px;
background: #ffffff;
border-radius: 4px;
......@@ -883,7 +912,7 @@ width: 50px;
margin: 14px 0 0px 23px;
}
.footer-right-bot {
width: 25%;
width: 100%;
margin-top: 20px;
display: inline-block;
margin-left: 15px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论