修改cabinet页面
This commit is contained in:
WindowBird
parent
47c4426e08
commit
e69dcdeafa
|
|
@ -6,8 +6,7 @@ useHead({
|
|||
link: [
|
||||
{rel: 'stylesheet', href: '/css/bootstrap.min.css'},
|
||||
{rel: 'stylesheet', href: '/css/main2.css'},
|
||||
{rel: 'stylesheet', href: '/css/yuxi2019.css'},
|
||||
{rel: 'stylesheet', href: '/css/Internet_cabinet.css'}
|
||||
{rel: 'stylesheet', href: '/css/yuxi2019.css'}
|
||||
],
|
||||
script: [
|
||||
|
||||
|
|
@ -90,39 +89,39 @@ useHead({
|
|||
<div class="text-center item2 row">
|
||||
<h3>换电柜系统核心功能</h3>
|
||||
<div style="height: 30px;"/>
|
||||
<div class="col-xs-7 col-lg-4">
|
||||
<div class="col-xs-6col-lg-4">
|
||||
<img alt="" src="/img/Internet_cabinet/icon_1.png">
|
||||
<h4>用户管理</h4>
|
||||
<h6>对注册小程序/app的用户进行管理。</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-7 col-lg-4">
|
||||
<div class="col-xs-6col-lg-4">
|
||||
<img alt="" src="/img/Internet_cabinet/icon_3.png">
|
||||
<h4>换电柜管理</h4>
|
||||
<h6>可分地区、分站点查询换电柜状态，对换电柜进行管理。</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-7 col-lg-4">
|
||||
<div class="col-xs-6col-lg-4">
|
||||
<img alt="" src="/img/Internet_cabinet/icon_4.png">
|
||||
<h4>网点/代理商管理</h4>
|
||||
<h6>对各城市、各区域代理点/网点信息
|
||||
数据进行统计分析管理。</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-7 col-lg-4">
|
||||
<div class="col-xs-6col-lg-4">
|
||||
<img alt="" src="/img/Internet_cabinet/icon_5.png">
|
||||
<h4>订单管理</h4>
|
||||
<h6>可查询并管理换电柜的换电订单详细信息。</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-7 col-lg-4">
|
||||
<div class="col-xs-6col-lg-4">
|
||||
<img alt="" src="/img/Internet_cabinet/icon_6.png">
|
||||
<h4>财务管理</h4>
|
||||
<h6>可根据租赁情况、财务费用生成统
|
||||
计报表。</h6>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-7 col-lg-4">
|
||||
<div class="col-xs-6col-lg-4">
|
||||
<img alt="" src="/img/Internet_cabinet/icon_7.png">
|
||||
<h4>运维管理</h4>
|
||||
<h6>可分站点查询充电柜的运维人员、
|
||||
|
|
@ -173,32 +172,49 @@ useHead({
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item3_div .item3_div_bg {
|
||||
height: 110px;
|
||||
font-size: 22px;
|
||||
/* ====== 基础布局（引用了 bootstrap/main2/yuxi2019） ====== */
|
||||
|
||||
/* 页面容器 */
|
||||
.internet_Things_car {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 顶部横幅 */
|
||||
.internet_Things_car .item1 {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
background: url('/img/internet_thinks/banner.png') no-repeat center center #000;
|
||||
background-size: auto 560px;
|
||||
margin-top: 90px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 h2 {
|
||||
font-size: 48px;
|
||||
margin: 120px 0 70px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 h4 {
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Section: item2 核心组成/功能 */
|
||||
.internet_Things_car .item2 {
|
||||
overflow: hidden;
|
||||
width: 1200px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 h3 {
|
||||
font-size: 26px;
|
||||
font-family: "PingFangSC-Semibold,PingFang SC";
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
line-height: 110px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.item3_div {
|
||||
width: 540px;
|
||||
height: 220px;
|
||||
border: 1px solid rgba(143, 143, 143, 1);
|
||||
font-family: "PingFangSC-Regular, PingFang SC";
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item3_div .item3_div_txt {
|
||||
height: 110px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
padding-top: 20px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
line-height: 30px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
margin-bottom: 20px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.item2_p {
|
||||
|
|
@ -219,4 +235,185 @@ useHead({
|
|||
color: rgba(102, 102, 102, 1);
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/* Section: item3 换电柜的优势 */
|
||||
.item3_div {
|
||||
width: 540px;
|
||||
height: 220px;
|
||||
border: 1px solid rgba(143, 143, 143, 1);
|
||||
font-family: "PingFangSC-Regular, PingFang SC";
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item3_div .item3_div_bg {
|
||||
height: 110px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
line-height: 110px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.item3_div .item3_div_txt {
|
||||
height: 110px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
padding-top: 20px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/* Section: 应用场景 itemTwo */
|
||||
.internet_Things_car .itemTwo {
|
||||
overflow: hidden;
|
||||
width: 1200px;
|
||||
height: auto;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.itemTwo .col-lg-6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.itemTwo .textTitle {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.itemTwo .textTitle h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ====== 响应式调整 ====== */
|
||||
@media (max-width: 1199px) {
|
||||
.internet_Things_car .item2 {
|
||||
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 {
|
||||
height: 420px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 h2 {
|
||||
font-size: 36px;
|
||||
margin: 100px 0 40px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.item3_div {
|
||||
width: 48%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item3_div .item3_div_bg {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.item3_div .item3_div_txt {
|
||||
height: auto;
|
||||
padding: 16px 24px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.internet_Things_car .itemTwo {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.itemTwo .col-lg-6 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.itemTwo .textTitle {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.internet_Things_car .item1 {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 h2 {
|
||||
font-size: 28px;
|
||||
margin: 80px 0 20px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.item2_p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.item2_lable {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item3_div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.itemTwo .textTitle h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.internet_Things_car .item1 {
|
||||
height: 240px;
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 h2 {
|
||||
font-size: 22px;
|
||||
margin: 40px 0 15px 0;
|
||||
}
|
||||
|
||||
.internet_Things_car .item1 h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.internet_Things_car .item2 img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item2_p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.item2_lable {
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.internet_Things_car .itemTwo {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user