18 changed files with 643 additions and 367 deletions
@ -1,30 +1,31 @@ |
|||||
<template> |
<template> |
||||
<div class="layer m-auto panel"> |
<div class="panel" :style="{'backgroundColor':color?color:'#ffffff'}"> |
||||
<h2>{{vtitle}}</h2> |
<div class="panel__wrapper layer m-auto"> |
||||
<div class="panel__desc"> |
<h2>{{vtitle}}</h2> |
||||
<div class="panel__desc__word">{{vdesc}}</div> |
<div class="panel__desc"> |
||||
</div> |
<div class="panel__desc__word">{{vdesc}}</div> |
||||
<slot></slot> |
</div> |
||||
|
<slot></slot> |
||||
</div> |
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
props:['vtitle','vdesc'], |
props: ['vtitle', 'vdesc', 'color'], |
||||
|
|
||||
} |
} |
||||
</script> |
</script> |
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
@media screen and (min-width:1440px){ |
@media screen and (min-width: 1440px) { |
||||
@import '@/assets/pc-1920.scss'; |
@import "@/assets/pc-1920.scss"; |
||||
@import './pc.scss'; |
@import "./pc.scss"; |
||||
} |
|
||||
@media screen and (min-width:768px) and (max-width:1440px) { |
|
||||
@import '@/assets/pc-1366.scss'; |
|
||||
@import './pc.scss'; |
|
||||
} |
} |
||||
@media screen and (max-width:768px) { |
@media screen and (min-width: 768px) and (max-width: 1440px) { |
||||
@import '@/assets/pc-768.scss'; |
@import "@/assets/pc-1366.scss"; |
||||
@import './pc.scss'; |
@import "./pc.scss"; |
||||
|
} |
||||
|
@media screen and (max-width: 768px) { |
||||
|
@import "@/assets/pc-768.scss"; |
||||
|
@import "./pc.scss"; |
||||
} |
} |
||||
|
|
||||
</style> |
</style> |
||||
|
|||||
@ -1,53 +1,54 @@ |
|||||
<template> |
<template> |
||||
<div class="wrapper"> |
<div class="wrapper"> |
||||
<ul class="layer m-auto descicon"> |
<div class="center_wraper"></div> |
||||
<li class="item"> |
<ul class=" descicon layer m-auto clearfix"> |
||||
<div class="icon i0"> |
<li class="item"> |
||||
</div> |
<div class="icon i0"> |
||||
<div class="word"> |
</div> |
||||
<p class="word__titile">技术VC</p> |
<div class="word"> |
||||
<p class="word__desc">(技术支持、企业资源整合)</p> |
<p class="word__titile">技术VC</p> |
||||
</div> |
<p class="word__desc">(技术支持、企业资源整合)</p> |
||||
</li> |
</div> |
||||
<li class="item"> |
</li> |
||||
<div class="icon i1"> |
<li class="item"> |
||||
</div> |
<div class="icon i1"> |
||||
<div class="word"> |
</div> |
||||
<p class="word__titile">10年+</p> |
<div class="word"> |
||||
<p class="word__desc">(技术沉淀团队 )</p> |
<p class="word__titile">10年+</p> |
||||
</div> |
<p class="word__desc">(技术沉淀团队 )</p> |
||||
</li> |
</div> |
||||
<li class="item"> |
</li> |
||||
<div class="icon i2"> |
<li class="item"> |
||||
</div> |
<div class="icon i2"> |
||||
<div class="word"> |
</div> |
||||
<p class="word__titile">100人+</p> |
<div class="word"> |
||||
<p class="word__desc">(人精英团队 )</p> |
<p class="word__titile">100人+</p> |
||||
</div> |
<p class="word__desc">(人精英团队 )</p> |
||||
</li> |
</div> |
||||
<li class="item"> |
</li> |
||||
<div class="icon i3"> |
<li class="item"> |
||||
</div> |
<div class="icon i3"> |
||||
<div class="word"> |
</div> |
||||
<p class="word__titile">行业口碑</p> |
<div class="word"> |
||||
<p class="word__desc">(评价极佳)</p> |
<p class="word__titile">行业口碑</p> |
||||
</div> |
<p class="word__desc">(评价极佳)</p> |
||||
</li> |
</div> |
||||
</ul> |
</li> |
||||
</div> |
</ul> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<style lang='scss'> |
<style lang='scss'> |
||||
@media screen and (min-width:1440px) { |
@media screen and (min-width: 1440px) { |
||||
@import '@/assets/pc-1920.scss'; |
@import "@/assets/pc-1920.scss"; |
||||
@import './pc.scss'; |
@import "./pc.scss"; |
||||
} |
} |
||||
|
|
||||
@media screen and (min-width:768px) and (max-width:1440px) { |
@media screen and (min-width: 768px) and (max-width: 1440px) { |
||||
@import '@/assets/pc-1366.scss'; |
@import "@/assets/pc-1366.scss"; |
||||
@import './pc.scss'; |
@import "./pc.scss"; |
||||
} |
} |
||||
@media screen and (max-width:768px) { |
@media screen and (max-width: 768px) { |
||||
@import '@/assets/pc-768.scss'; |
@import "@/assets/pc-768.scss"; |
||||
@import './pc.scss'; |
@import "./pc.scss"; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,53 +1,65 @@ |
|||||
.wrapper{ |
.wrapper { |
||||
border-bottom: solid 1px #e2e2e2; |
border-bottom: solid 1px #e2e2e2; |
||||
|
|
||||
.descicon { |
.descicon { |
||||
height: bq(105); |
// min-height: bq(105); |
||||
display: flex; |
// display: flex; |
||||
|
// display: inline-block; |
||||
|
// margin: 0 auto; |
||||
|
|
||||
.item { |
.item { |
||||
|
float: left; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
width: bq(273+156); |
flex-direction: row; |
||||
|
width: bq(273+60); |
||||
padding: bq(28) 0; |
padding: bq(28) 0; |
||||
|
|
||||
.icon { |
.icon { |
||||
width: bq(33); |
width: bq(33); |
||||
height: bq(33); |
height: bq(33); |
||||
margin: 0 bq(31); |
margin: 0 bq(31); |
||||
} |
} |
||||
|
|
||||
.i0{ |
.i0 { |
||||
background-image: url('/image/icon0.png'); |
background-image: url('/image/icon0.png'); |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
} |
} |
||||
.i1{ |
|
||||
|
.i1 { |
||||
background-image: url('/image/icon1.png'); |
background-image: url('/image/icon1.png'); |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
} |
} |
||||
.i2{ |
|
||||
|
.i2 { |
||||
background-image: url('/image/icon2.png'); |
background-image: url('/image/icon2.png'); |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
} |
} |
||||
.i3{ |
|
||||
|
.i3 { |
||||
background-image: url('/image/icon3.png'); |
background-image: url('/image/icon3.png'); |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
} |
} |
||||
|
|
||||
.word { |
.word { |
||||
line-height: bq(30 ); |
line-height: bq(30); |
||||
|
|
||||
.word__titile { |
.word__titile { |
||||
color: #3175bb; |
color: #3175bb; |
||||
font-size: bq(22); |
font-size: bq(22); |
||||
} |
} |
||||
|
|
||||
.word__desc { |
.word__desc { |
||||
|
white-space: nowrap; |
||||
font-size: bq(18); |
font-size: bq(18); |
||||
color: #8f8f8f; |
color: #8f8f8f; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
@ -1,35 +1,34 @@ |
|||||
<template> |
<template> |
||||
<div class="header layer m-auto"> |
<div class="header layer m-auto"> |
||||
<div class="logo">华谦官网</div> |
<div class="logo">华谦官网</div> |
||||
<div class="hr border-right"></div> |
<div class="hr border-right"></div> |
||||
<div class="desc"> |
<div class="header__desc"> |
||||
<div>区块链</div> |
<div>区块链</div> |
||||
<div>Block Chain + Professional Technology Platform</div> |
<div>Block Chain + Professional Technology Platform</div> |
||||
</div> |
|
||||
<ul class="navbar"> |
|
||||
<li class="navbar__item">首页</li> |
|
||||
<li class="navbar__item">区块链+</li> |
|
||||
<li class="navbar__item">短视频直播</li> |
|
||||
<li class="navbar__item">商城系统</li> |
|
||||
<li class="navbar__item">棋牌系统</li> |
|
||||
<li class="navbar__item">团队介绍</li> |
|
||||
<li class="navbar__item">企业愿景</li> |
|
||||
<li class="navbar__item">关于我们</li> |
|
||||
</ul> |
|
||||
</div> |
</div> |
||||
|
<ul class="navbar"> |
||||
|
<li class="navbar__item">首页</li> |
||||
|
<li class="navbar__item">区块链+</li> |
||||
|
<li class="navbar__item">短视频直播</li> |
||||
|
<li class="navbar__item">商城系统</li> |
||||
|
<li class="navbar__item">棋牌系统</li> |
||||
|
<li class="navbar__item">团队介绍</li> |
||||
|
<li class="navbar__item">企业愿景</li> |
||||
|
<li class="navbar__item">关于我们</li> |
||||
|
</ul> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<style lang='scss'> |
<style lang='scss'> |
||||
@media screen and (min-width:1440px){ |
@media screen and (min-width: 1440px) { |
||||
@import '@/assets/pc-1920.scss'; |
@import "@/assets/pc-1920.scss"; |
||||
@import './pc.scss'; |
@import "./pc.scss"; |
||||
} |
|
||||
@media screen and (min-width:768px) and (max-width:1440px) { |
|
||||
@import '@/assets/pc-1366.scss'; |
|
||||
@import './pc.scss'; |
|
||||
} |
} |
||||
@media screen and (max-width:768px) { |
@media screen and (min-width: 768px) and (max-width: 1440px) { |
||||
@import '@/assets/pc-768.scss'; |
@import "@/assets/pc-1366.scss"; |
||||
@import './pc.scss'; |
@import "./pc.scss"; |
||||
|
} |
||||
|
@media screen and (max-width: 768px) { |
||||
|
@import "@/assets/pc-768.scss"; |
||||
|
@import "./pc.scss"; |
||||
} |
} |
||||
|
|
||||
</style> |
</style> |
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 258 B After Width: | Height: | Size: 258 B |
@ -0,0 +1,77 @@ |
|||||
|
(function (designWidth, maxWidth) { |
||||
|
var doc = document, |
||||
|
win = window; |
||||
|
var docEl = doc.documentElement; |
||||
|
var metaEl, |
||||
|
metaElCon; |
||||
|
var styleText, |
||||
|
remStyle = document.createElement("style"); |
||||
|
var tid; |
||||
|
|
||||
|
function refreshRem() { |
||||
|
// var width = parseInt(window.screen.width); // uc有bug
|
||||
|
var width = docEl.getBoundingClientRect().width; |
||||
|
if (!maxWidth) { |
||||
|
maxWidth = 540; |
||||
|
}; |
||||
|
if (width > maxWidth) { // 淘宝做法：限制在540的屏幕下，这样100%就跟10rem不一样了
|
||||
|
width = maxWidth; |
||||
|
} |
||||
|
var rem = width * 100 / designWidth; |
||||
|
// var rem = width / 10; // 如果要兼容vw的话分成10份 淘宝做法
|
||||
|
//docEl.style.fontSize = rem + "px"; //旧的做法，在uc浏览器下面会有切换横竖屏时定义了font-size的标签不起作用的bug
|
||||
|
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; |
||||
|
} |
||||
|
|
||||
|
// 设置 viewport ，有的话修改 没有的话设置
|
||||
|
metaEl = doc.querySelector('meta[name="viewport"]'); |
||||
|
// 20171219修改：增加 viewport-fit=cover ，用于适配iphoneX
|
||||
|
metaElCon = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"; |
||||
|
if (metaEl) { |
||||
|
metaEl.setAttribute("content", metaElCon); |
||||
|
} else { |
||||
|
metaEl = doc.createElement("meta"); |
||||
|
metaEl.setAttribute("name", "viewport"); |
||||
|
metaEl.setAttribute("content", metaElCon); |
||||
|
if (docEl.firstElementChild) { |
||||
|
docEl.firstElementChild.appendChild(metaEl); |
||||
|
} else { |
||||
|
var wrap = doc.createElement("div"); |
||||
|
wrap.appendChild(metaEl); |
||||
|
doc.write(wrap.innerHTML); |
||||
|
wrap = null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||
|
refreshRem(); |
||||
|
|
||||
|
if (docEl.firstElementChild) { |
||||
|
docEl.firstElementChild.appendChild(remStyle); |
||||
|
} else { |
||||
|
var wrap = doc.createElement("div"); |
||||
|
wrap.appendChild(remStyle); |
||||
|
doc.write(wrap.innerHTML); |
||||
|
wrap = null; |
||||
|
} |
||||
|
|
||||
|
win.addEventListener("resize", function () { |
||||
|
clearTimeout(tid); //防止执行两次
|
||||
|
tid = setTimeout(refreshRem, 300); |
||||
|
}, false); |
||||
|
|
||||
|
win.addEventListener("pageshow", function (e) { |
||||
|
if (e.persisted) { // 浏览器后退的时候重新计算
|
||||
|
clearTimeout(tid); |
||||
|
tid = setTimeout(refreshRem, 300); |
||||
|
} |
||||
|
}, false); |
||||
|
|
||||
|
if (doc.readyState === "complete") { |
||||
|
doc.body.style.fontSize = "16px"; |
||||
|
} else { |
||||
|
doc.addEventListener("DOMContentLoaded", function (e) { |
||||
|
doc.body.style.fontSize = "16px"; |
||||
|
}, false); |
||||
|
} |
||||
|
})(750, 750); |
||||
Loading…
Reference in new issue