Skip to content

梁建民 / h5

Go to a project
Commit 909587bd by LJM
Options

css

parent a2a1e5c5
Expand all
Inline Side-by-side
Showing with 106 additions and 18 deletions
src/assets/css/about/contact.less
......@@ -8,7 +8,7 @@
left: -0.12rem;
}
color:#333;
color: #333;
font-size: 12px;
font-weight: bold;
......@@ -58,12 +58,10 @@
}
.address-info {
margin: 0 auto;
margin: 0.48rem auto 0;
width: 9.6rem;
margin-top: 0.48rem;
ul {
.add-info-box-tab {
li {
line-height: 0.93rem;
text-align: center;
......@@ -91,6 +89,43 @@
border-radius: 3px;
padding-bottom: 0.2rem;
.mapbg-list {
padding: 10px;
li {
margin-right: 5px;
&:last-child {
margin-right: 0;
}
i {
width: 10px;
height: 10px;
&.color1 {
background-color: #1280d0;
}
&.color2 {
background-color: #ff812f;
}
&.color3 {
background-color: #004b8b;
}
}
span {
font-size: 14px;
color: #000000;
font-weight: bold;
margin-left: 4px;
}
}
}
.mapbg {
width: 100%;
height: 344px;
......
src/assets/css/about/contact.css → src/assets/css/about/contact.min.css
......@@ -47,11 +47,10 @@
margin-left: 1.4rem;
}
.contact .address-info {
margin: 0 auto;
margin: 0.48rem auto 0;
width: 9.6rem;
margin-top: 0.48rem;
}
.contact .address-info ul li {
.contact .address-info .add-info-box-tab li {
line-height: 0.93rem;
text-align: center;
height: 0.93rem;
......@@ -61,10 +60,10 @@
margin-right: 0.13rem;
padding: 0 0.05rem;
}
.contact .address-info ul li:last-child {
.contact .address-info .add-info-box-tab li:last-child {
margin-right: 0;
}
.contact .address-info ul li.act {
.contact .address-info .add-info-box-tab li.act {
background: #1969F9;
color: #fff;
}
......@@ -74,6 +73,34 @@
border-radius: 3px;
padding-bottom: 0.2rem;
}
.contact .address-info .add-info-box .mapbg-list {
padding: 10px;
}
.contact .address-info .add-info-box .mapbg-list li {
margin-right: 5px;
}
.contact .address-info .add-info-box .mapbg-list li:last-child {
margin-right: 0;
}
.contact .address-info .add-info-box .mapbg-list li i {
width: 10px;
height: 10px;
}
.contact .address-info .add-info-box .mapbg-list li i.color1 {
background-color: #1280d0;
}
.contact .address-info .add-info-box .mapbg-list li i.color2 {
background-color: #ff812f;
}
.contact .address-info .add-info-box .mapbg-list li i.color3 {
background-color: #004b8b;
}
.contact .address-info .add-info-box .mapbg-list li span {
font-size: 14px;
color: #000000;
font-weight: bold;
margin-left: 4px;
}
.contact .address-info .add-info-box .mapbg {
width: 100%;
height: 344px;
......@@ -103,3 +130,4 @@
height: 5.07rem;
margin-top: 0.4rem;
}
/*# sourceMappingURL=contact.min.css.map */
\ No newline at end of file
src/assets/css/about/contact.min.css.map 0 → 100644
{"version":3,"sources":["contact.less"],"names":[],"mappings":"AAAA;EACE,oBAAA;EACA,sBAAA;EAQA,WAAA;EACA,eAAA;EACA,iBAAA;;AAZF,QAIE;EACE,cAAA;EACA,kBAAA;EACA,cAAA;;AAPJ,QAcE;EACE,aAAA;EACA,eAAA;EACA,mBAAA;EACA,4DAAA;EACA,sBAAA;EACA,cAAA;EACA,sBAAA;EACA,qBAAA;EACA,oBAAA;;AAvBJ,QAcE,QAWE;EACE,aAAA;;AA1BN,QAcE,QAeE;EACE,qBAAA;;AA9BN,QAcE,QAmBE;EACE,eAAA;EACA,qBAAA;;AAEA,QAvBJ,QAmBE,EAIG;EACC,cAAA;;AAGF,QA3BJ,QAmBE,EAQG;EACC,cAAA;;AAGF,QA/BJ,QAmBE,EAYG;EACC,cAAA;;AAGF,QAnCJ,QAmBE,EAgBG;EACC,cAAA;;AAlDR,QAcE,QAwCE;EACE,mBAAA;;AAvDN,QA2DE;EACE,sBAAA;EACA,aAAA;;AA7DJ,QA2DE,cAIE,kBACE;EACE,oBAAA;EACA,kBAAA;EACA,eAAA;EACA,mBAAA;EACA,4DAAA;EACA,gCAAA;EACA,qBAAA;EACA,kBAAA;;AAEA,QAfN,cAIE,kBACE,GAUG;EACC,eAAA;;AAGF,QAnBN,cAIE,kBACE,GAcG;EACC,mBAAA;EACA,WAAA;;AAhFV,QA2DE,cA0BE;EACE,mBAAA;EACA,4DAAA;EACA,kBAAA;EACA,sBAAA;;AAzFN,QA2DE,cA0BE,cAME;EACE,aAAA;;AA5FR,QA2DE,cA0BE,cAME,YAGE;EACE,iBAAA;;AAEA,QAtCR,cA0BE,cAME,YAGE,GAGG;EACC,eAAA;;AAlGZ,QA2DE,cA0BE,cAME,YAGE,GAOE;EACE,WAAA;EACA,YAAA;;AAEA,QA9CV,cA0BE,cAME,YAGE,GAOE,EAIG;EACC,yBAAA;;AAGF,QAlDV,cA0BE,cAME,YAGE,GAOE,EAQG;EACC,yBAAA;;AAGF,QAtDV,cA0BE,cAME,YAGE,GAOE,EAYG;EACC,yBAAA;;AAlHd,QA2DE,cA0BE,cAME,YAGE,GAyBE;EACE,eAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;;AA3HZ,QA2DE,cA0BE,cA2CE;EACE,WAAA;EACA,aAAA;EACA,8DAAA;EACA,sBAAA;;AApIR,QA2DE,cA0BE,cAkDE;EACE,aAAA;EACA,oBAAA;EACA,qBAAA;;AA1IR,QA2DE,cA0BE,cAkDE,mBAKE;EACE,cAAA;;AA7IV,QA2DE,cA0BE,cAkDE,mBASE;EACE,kBAAA;;AAjJV,QA2DE,cA0BE,cAkDE,mBAaE;EACE,kBAAA;;AArJV,QA2DE,cA0BE,cAkDE,mBAiBE;EACE,eAAA;EACA,cAAA;EACA,qBAAA;;AA3JV,QA2DE,cA0BE,cA2EE;EACE,eAAA;EACA,kBAAA","file":"contact.min.css"}
\ No newline at end of file
src/views/aboutUs/contact.vue
......@@ -44,12 +44,26 @@
</div>
</div>
<div class="address-info">
<ul class="row">
<ul class="row add-info-box-tab">
<li :class="{'act':act==index}" @click="showBox(index)" v-for="(item,index) in nav_list" :key="index">{{item}}
</li>
</ul>
<div class="add-info-box" v-show="act==0">
<div class="mapbg"></div>
<ul class="mapbg-list row verCenter">
<li class="row verCenter">
<i class="color1"></i>
<span>深圳总部 上海中心</span>
</li>
<li class="row verCenter">
<i class="color2"></i>
<span>仓储中心</span>
</li>
<li class="row verCenter">
<i class="color3"></i>
<span>各地办事处</span>
</li>
</ul>
<div class="mapbg" @click="imagePreviewChange()"></div>
</div>
<div class="add-info-box" v-show="act==1">
<div class="address-con-group boxsiz">
......@@ -69,7 +83,8 @@
<div class="a4a4">Address</div>
</div>
<div class="mt2">11F, 12th Bldg, Baoneng Science and Technology Industrial Park South District, No.1 Qingli
Road, Bantian Street, Longgang District, Shenzhen, China</div>
Road, Bantian Street, Longgang District, Shenzhen, China
</div>
</div>
......@@ -157,6 +172,7 @@
<script>
import Vue from 'vue';
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: "8vggsUWcL38cpMGEozcmTr89"
})
......@@ -170,17 +186,22 @@
return {
num: 16,
act: 0,
nav_list: ["猎芯网业务分布","深圳总部", "香港办事处", "苏州分公司", "上海分公司"]
nav_list: ["猎芯网业务分布", "深圳总部", "香港办事处", "苏州分公司", "上海分公司"]
};
},
created() {
},
computed: {
},
computed: {},
methods: {
imagePreviewChange() {
WeixinJSBridge.invoke('imagePreview', {
current: 'http://img.ichunt.com/images/ichunt/202207/01/288db90e07fd1b98c3cd975a04b39cf6.jpg'
}, function (res) {
console.log(res.err_msg);
});
},
showBox(index) {
this.act = index;
}
......@@ -188,5 +209,5 @@
};
</script>
<style scoped>
@import "../../assets/css/about/contact.css";
@import "../../assets/css/about/contact.min.css";
</style>
\ No newline at end of file
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 sign in to comment