Skip to content

H
hls-xcmg-vue-app
Commit 2ef4c666 authored by 786817560's avatar 786817560
Browse files
Options

'标题居中'

parent fe0e16d1
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 104 deletions
src/pages/home/home-page.vue
View file @ 2ef4c666
......@@ -2,12 +2,12 @@
* @Descrip: 主页
* @Author: your name
* @Date: 2019-10-10 14:25:15
* @LastEditTime: 2019-10-15 15:02:01
* @LastEditTime: 2019-10-16 12:35:28
* @LastEditors: Please set LastEditors
-->
<template>
<h-view id="homePage" class="public-style" title="徐工租赁">
<h-header :proportion="[7,8,0]" class="bar-custom">
<h-header :proportion="[7,9,0]" class="bar-custom">
<div slot="left" class="h-header-btn">
<!-- <i class="ion-ios-arrow-back" /> -->
<img class="locations" src="@/assets/homePage/location.png" alt="" @click="location">
......
src/pages/productQuery/product-detailed.vue
View file @ 2ef4c666
<!--
* @Descrip: 查询首页
* @Descrip: 产品明细
* @Author: your name
* @Date: 2019-10-15 14:30:00
* @LastEditTime: 2019-10-16 09:26:38
* @LastEditTime: 2019-10-16 11:15:35
* @LastEditors: Please set LastEditors
-->
<template>
<h-view id="query" class="public-style" title="产品查询">
<h-view id="detailed" class="public-style" title="产品查询">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
......@@ -14,7 +14,88 @@
</div>
</h-header>
<Tab @getTabNum="getTabNum" />
<h-content/>
<h-content v-if="tabNum === 0">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">经销商</div>
<span slot="content"> xxx经销商 </span>
</item>
<item>
<div slot="name" class="font-color">主机厂</div>
<span slot="content"> ****主机厂 </span>
</item>
</list-item>
<div class="equipment-list">经销商信息</div>
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">经销商所在省份</div>
<span slot="content"> 江苏徐州 </span>
</item>
<item>
<div slot="name" class="font-color">经销商地址</div>
<span slot="content"> 江苏省徐州市 </span>
</item>
<item>
<div slot="name" class="font-color">电话号码</div>
<span slot="content"> 15768097665 </span>
</item>
</list-item>
<div class="equipment-list">产品信息</div>
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">参数项</div>
<span slot="content"> GTZ226 </span>
</item>
<item>
<div slot="name" class="font-color">产品线</div>
<span slot="content"> 塔式起重机 </span>
</item>
<item>
<div slot="name" class="font-color">产品名称</div>
<span slot="content"> GTZ389起重机 </span>
</item>
<item>
<div slot="name" class="font-color">产品参考价</div>
<span slot="content"> 350,000.00 </span>
</item>
<item>
<div slot="name" class="font-color">价格有效期</div>
<span slot="content"> 2019-04-02 </span>
</item>
</list-item>
</h-content>
<h-content v-if="tabNum === 1">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">经销商</div>
<span slot="content"> xxx经销商 </span>
</item>
<item>
<div slot="name" class="font-color">主机厂</div>
<span slot="content"> ****主机厂 </span>
</item>
</list-item>
</h-content>
<h-content v-if="tabNum === 2">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">经销商</div>
<span slot="content"> xxx经销商 </span>
</item>
<item>
<div slot="name" class="font-color">主机厂</div>
<span slot="content"> ****主机厂 </span>
</item>
</list-item>
</h-content>
<bottom-tab class="footer-button">
<tab-button :class="{bgcolor: bgc_flag}" class="butt"><img src="@/assets/productQuery/trial.png" alt=""> 试算</tab-button>
<tab-button class="collect butt" @click.native="collect"><img :src="src" alt="">收藏</tab-button>
</bottom-tab>
<div v-if="collect_flag" class="show-collect">
<img src="@/assets/productQuery/success.png" alt="">
<p>收藏成功</p>
</div>
</h-view>
</template>
......@@ -28,6 +109,9 @@ export default {
data () {
return {
tabNum: 0,
bgc_flag: true,
collect_flag: false,
src: require('@/assets/productQuery/collect.png'),
}
},
computed: {},
......@@ -38,12 +122,20 @@ export default {
console.log(i)
this.tabNum = i
},
collect () {
this.collect_flag = true
console.log(this.collect_flag)
setTimeout(() => {
this.collect_flag = false
this.src = require('@/assets/productQuery/coll-success.png')
}, 1500)
},
},
}
</script>
<style lang='less' scoped>
#query {
.h-header-btn {
#detailed {
.h-header-btn {
img {
width: 16px;
height: 16px;
......@@ -58,102 +150,91 @@ export default {
line-height: 24px;
}
}
.hinput {
.second-part {
.font-color {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
}
span {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56,63,69,0.60);
letter-spacing: 0;
}
}
.equipment-list {
height: 40px;
line-height: 40px;
background-color: #fafafa;
color: #00469c;
font-size: 15px;
margin-left: 16px;
position: relative;
z-index: 50;
width: 100%;
height: 50px;
//border-bottom: 1px solid #cccccc70;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
.search-box {
width: 93.6%;
height: 36px;
font-size: 14px;
color: #B4B4B5;
letter-spacing: 0;
font-family: PingFangSC-Regular;
border: 1px solid rgba(56, 63, 69, 0.60);
border-radius: 4px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
input {
width: 90%;
height: 100%;
opacity: 0.4;
border: none;
line-height: 34px;
}
}
margin-top: -10px;
}
.equipment-list::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #00469c;
position: absolute;
left: -15px;
top: 10px;
}
.footer-button {
.butt {
width: 48%;
margin-left: 3px;
border: 1px solid #00469C;
border-radius: 4px;
}
img {
height: 19px;
width: 19px;
margin-top: 2px;
margin-right: 3px;
}
.collect {
color: #00469C;
}
}
.bgcolor {
background: #00469C;
border: 1px solid #00469C;
border-radius: 4px;
font-family: PingFangSC-Semibold;
color: #FFFFFF;
}
.show-collect {
width: 240px;
height: 100px;
opacity: 0.7;
background: #383F45;
border-radius: 4px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
p {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #FFFFFF;
margin-left: 8px;
}
.box {
position: relative;
width: 100%;
height: 79px;
background: #fff;
border-top: 1px solid #cccccc70;
margin-bottom: 8px;
.first {
height: 20px;
width: 100%;
display: flex;
flex-direction: row;
margin-top: 16px;
img {
width: 16px;
height: 16px;
margin-left: 16px;
}
.product-class {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56,63,69,0.60);
margin-left: 8px;
}
.product {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383F45;
margin-left: 16px
}
}
.second {
height: 20px;
width: 100%;
display: flex;
flex-direction: row;
margin-top: 7px;
.product-class {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56,63,69,0.60);
margin-left: 54px;
}
.product {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #383F45;
margin-left: 16px
}
img {
width: 16px;
height: 16px;
margin-left: 9px;
}
}
.arrow {
position: absolute;
top: 50%;
margin-top: -8px;
right: 20px;
height: 16px;
width: 16px;
}
img {
width: 16px;
height: 16px;
margin-left: -4px;
}
}
}
</style>
src/router/index.js
View file @ 2ef4c666
......@@ -2,7 +2,7 @@
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-24 12:34:06
* @LastEditTime: 2019-10-16 09:29:11
* @LastEditTime: 2019-10-16 10:09:23
* @LastEditors: Please set LastEditors
*/
import Vue from 'vue'
......@@ -169,7 +169,7 @@ export default new Router({
{path: '/margin-pay-entry', component: MarginPayEntry, name: 'MarginPayEntry', meta: {keepAlive: true}},
// 产品查询
{path: '/query-home', component: QueryHome, name: 'QueryHome', meta: {keepAlive: true}},
{path: '/product-detailed', component: ProDetailed, name: 'ProDetailed', meta: {keepAlive: true}},
{path: '/product-detailed', component: ProDetailed, name: 'ProDetailed', meta: {keepAlive: false}},
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment