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 @@ ...@@ -2,12 +2,12 @@
* @Descrip: 主页 * @Descrip: 主页
* @Author: your name * @Author: your name
* @Date: 2019-10-10 14:25:15 * @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 * @LastEditors: Please set LastEditors
--> -->
<template> <template>
<h-view id="homePage" class="public-style" title="徐工租赁"> <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"> <div slot="left" class="h-header-btn">
<!-- <i class="ion-ios-arrow-back" /> --> <!-- <i class="ion-ios-arrow-back" /> -->
<img class="locations" src="@/assets/homePage/location.png" alt="" @click="location"> <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 * @Author: your name
* @Date: 2019-10-15 14:30:00 * @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 * @LastEditors: Please set LastEditors
--> -->
<template> <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"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
...@@ -14,7 +14,88 @@ ...@@ -14,7 +14,88 @@
</div> </div>
</h-header> </h-header>
<Tab @getTabNum="getTabNum" /> <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> </h-view>
</template> </template>
...@@ -28,6 +109,9 @@ export default { ...@@ -28,6 +109,9 @@ export default {
data () { data () {
return { return {
tabNum: 0, tabNum: 0,
bgc_flag: true,
collect_flag: false,
src: require('@/assets/productQuery/collect.png'),
} }
}, },
computed: {}, computed: {},
...@@ -38,12 +122,20 @@ export default { ...@@ -38,12 +122,20 @@ export default {
console.log(i) console.log(i)
this.tabNum = 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> </script>
<style lang='less' scoped> <style lang='less' scoped>
#query { #detailed {
.h-header-btn { .h-header-btn {
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -58,102 +150,91 @@ export default { ...@@ -58,102 +150,91 @@ export default {
line-height: 24px; 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; position: relative;
z-index: 50; margin-top: -10px;
width: 100%; }
height: 50px; .equipment-list::before {
//border-bottom: 1px solid #cccccc70; content: "";
display: flex; display: block;
justify-content: center; width: 4px;
align-items: center; height: 20px;
background: #fff; background-color: #00469c;
.search-box { position: absolute;
width: 93.6%; left: -15px;
height: 36px; top: 10px;
font-size: 14px; }
color: #B4B4B5; .footer-button {
letter-spacing: 0; .butt {
font-family: PingFangSC-Regular; width: 48%;
border: 1px solid rgba(56, 63, 69, 0.60); margin-left: 3px;
border-radius: 4px; border: 1px solid #00469C;
display: flex; border-radius: 4px;
flex-direction: row; }
justify-content: center; img {
align-items: center; height: 19px;
width: 19px;
input { margin-top: 2px;
width: 90%; margin-right: 3px;
height: 100%; }
opacity: 0.4; .collect {
border: none; color: #00469C;
line-height: 34px; }
} }
} .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 { img {
position: relative; width: 16px;
width: 100%; height: 16px;
height: 79px; margin-left: -4px;
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;
}
} }
} }
}
</style> </style>
src/router/index.js
View file @ 2ef4c666
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @Author: your name * @Author: your name
* @Date: 2019-09-24 12:34:06 * @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 * @LastEditors: Please set LastEditors
*/ */
import Vue from 'vue' import Vue from 'vue'
...@@ -169,7 +169,7 @@ export default new Router({ ...@@ -169,7 +169,7 @@ export default new Router({
{path: '/margin-pay-entry', component: MarginPayEntry, name: 'MarginPayEntry', meta: {keepAlive: true}}, {path: '/margin-pay-entry', component: MarginPayEntry, name: 'MarginPayEntry', meta: {keepAlive: true}},
// 产品查询 // 产品查询
{path: '/query-home', component: QueryHome, name: 'QueryHome', 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) { scrollBehavior (to, from, savedPosition) {
if (to.hash) { 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