diff --git a/assets/_global.scss b/assets/_global.scss index 68e3ce5..a21db97 100644 --- a/assets/_global.scss +++ b/assets/_global.scss @@ -17,9 +17,21 @@ body { transform: translateY(-50%); } } - .m-auto { - margin: 0 auto; + +.m-auto { + margin: 0 auto; +} + +.ls5 { + letter-spacing: 5px +} + + +.clearfix { + &::after { + content: ""; + height: 0; + display: block; + clear: both; } - .ls5{ - letter-spacing: 5px - } \ No newline at end of file +} \ No newline at end of file diff --git a/assets/pc-1366.scss b/assets/pc-1366.scss index bd986f5..feab6e5 100644 --- a/assets/pc-1366.scss +++ b/assets/pc-1366.scss @@ -1,5 +1,6 @@ @import "./_global.scss"; $red: #ff0000; + html, body { width: 100%; @@ -17,31 +18,18 @@ body { transform: translateY(-50%); } } - $layerWidth:1366px; - $designWidth:1920px; - - .s1920 .layer { - width: 990px; - } - @function bq($v) { - @return $v*$layerWidth/$designWidth+px; - } +$layerWidth:1366px; +$designWidth:1920px; - .m-auto { - margin: 0 auto; - } - .f18d_b{ - font-size: bq(18); - font-weight: normal; - font-stretch: normal; - letter-spacing: 0px; - color: #2078be; - } - .f18d_g{ - font-size: bq(18); - font-weight: normal; - font-stretch: normal; - letter-spacing: 0px; - color: #4b4b4b; - } \ No newline at end of file +.s1920 .layer { + width: 85%; +} + +@function bq($v, $f:16) { + @return $v/$f+em; +} + +.m-auto { + margin: 0 auto; +} \ No newline at end of file diff --git a/assets/pc-1920.scss b/assets/pc-1920.scss index 5632962..f7e69e6 100644 --- a/assets/pc-1920.scss +++ b/assets/pc-1920.scss @@ -18,34 +18,38 @@ body { transform: translateY(-50%); } } - $layerWidth:1920px; - $designWidth:1920px; - .s1920 .layer { - width: 1366px; - } - @function bq($v) { - @return $v*$layerWidth/$designWidth+px; - } +$layerWidth:1920px; +$designWidth:1920px; - .s1366 .layer { - width: 1366px; - } +.s1920 .layer { + width: 1366px; +} - .m-auto { - margin: 0 auto; - } - .f18d_b{ - font-size: bq(18); - font-weight: normal; - font-stretch: normal; - letter-spacing: 0px; - color: #2078be; - } - .f18d_g{ - font-size: bq(18); - font-weight: normal; - font-stretch: normal; - letter-spacing: 0px; - color: #4b4b4b; - } \ No newline at end of file +@function bq($v, $f:16) { + @return $v/$f+em; +} + +.s1366 .layer { + width: 85%; +} + +.m-auto { + margin: 0 auto; +} + +.f18d_b { + font-size: bq(18); + font-weight: normal; + font-stretch: normal; + letter-spacing: 0px; + color: #2078be; +} + +.f18d_g { + font-size: bq(18); + font-weight: normal; + font-stretch: normal; + letter-spacing: 0px; + color: #4b4b4b; +} \ No newline at end of file diff --git a/assets/pc-768.scss b/assets/pc-768.scss index 74497f9..a8a5011 100644 --- a/assets/pc-768.scss +++ b/assets/pc-768.scss @@ -1,5 +1,6 @@ @import "./_global.scss"; $red: #ff0000; + html, body { width: 100%; @@ -17,43 +18,48 @@ body { transform: translateY(-50%); } } - $layerWidth:1920px; - $designWidth:1920px; - @media screen and (max-width:1024px) { - .s1920{ - width: $layerWidth; - } - } - - .s1920{ - width: 1920px; - } - .s1920 .layer { - width: 1366px; - } - @function bq($v) { - @return $v*$layerWidth/$designWidth+px; - } +$layerWidth:1366px; +$designWidth:1920px; - .m-auto { - margin: 0 auto; - } - .p-auto { - padding: 0 auto; +@media screen and (max-width:1024px) { + .s1920 { + width: $layerWidth; } +} - .f18d_b{ - font-size: bq(18); - font-weight: normal; - font-stretch: normal; - letter-spacing: 0px; - color: #2078be; - } - .f18d_g{ - font-size: bq(18); - font-weight: normal; - font-stretch: normal; - letter-spacing: 0px; - color: #4b4b4b; - } \ No newline at end of file +.s1920 { + width: 100%; +} + +.s1920 .layer { + width: 100%; +} + +@function bq($v, $f:16) { + @return $v/$f+em; +} + +.m-auto { + margin: 0 auto; +} + +.p-auto { + padding: 0 auto; +} + +.f18d_b { + font-size: bq(18); + font-weight: normal; + font-stretch: normal; + letter-spacing: 0px; + color: #2078be; +} + +.f18d_g { + font-size: bq(18); + font-weight: normal; + font-stretch: normal; + letter-spacing: 0px; + color: #4b4b4b; +} \ No newline at end of file diff --git a/components/panel/index.vue b/components/panel/index.vue index eefa72f..0a6a31c 100644 --- a/components/panel/index.vue +++ b/components/panel/index.vue @@ -1,30 +1,31 @@ diff --git a/components/panel/pc.scss b/components/panel/pc.scss index 0db0f16..e517ef6 100644 --- a/components/panel/pc.scss +++ b/components/panel/pc.scss @@ -1,13 +1,16 @@ .panel { - margin-top: 59px; - + padding-top: bq(59); + padding-bottom: bq(59); text-align: center; - color: #131720; + .panel__wrapper { + overflow: visible; + } + h2 { font-size: bq(36); - margin-bottom: 15px; + margin-bottom: bq(15); } .panel__desc { @@ -17,27 +20,29 @@ .panel__desc__word { font-size: bq(18); position: relative; + color: #4B4B4B; &::before { content: ""; position: absolute; - left: -75%; + left: bq(-100, 18); top: 50%; transform: translateY(-50%); width: bq(83); - height: 1px; - background-color: #b5b5b5; + height: 2px; + background-color: rgba(181, 181, 181, 1); } + &::after { content: ""; position: absolute; - right: -75%; + right: bq(-100, 18); top: 50%; transform: translateY(-50%); - width: bq(83); + width: bq(83, 18); height: 1px; - background-color: #b5b5b5; + background-color: rgba(181, 181, 181, 1); } } } -} +} \ No newline at end of file diff --git a/nuxt.config.js b/nuxt.config.js index 1fa5099..bc0ca97 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,64 +1,75 @@ - export default { mode: 'universal', /* - ** Headers of the page - */ + ** Headers of the page + */ head: { title: process.env.npm_package_name || '', - meta: [ - { charset: 'utf-8' }, - { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0' }, - { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } - ], - link: [ - { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } - ], - script:[ - {src:'flexible.js',type:"text/javascript",charset:'utf-8'} + meta: [{ + charset: 'utf-8' + }, + { + name: 'viewport', + content: 'width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0' + }, + { + hid: 'description', + name: 'description', + content: process.env.npm_package_description || '' + } ], + link: [{ + rel: 'icon', + type: 'image/x-icon', + href: '/favicon.ico' + }], + script: [{ + src: '/js/flexible.js', + type: "text/javascript", + charset: 'utf-8' + }], }, /* - ** Customize the progress-bar color - */ - loading: { color: '#fff' }, + ** Customize the progress-bar color + */ + loading: { + color: '#fff' + }, /* - ** Global CSS - */ + ** Global CSS + */ css: [ '~assets/reset.css', 'swiper/dist/css/swiper.css' ], /* - ** Plugins to load before mounting the App - */ - plugins: [ - { - src:"@/plugins/vue-awesome-swiper",ssr:false + ** Plugins to load before mounting the App + */ + plugins: [{ + src: "@/plugins/vue-awesome-swiper", + ssr: false }, - + ], /* - ** Nuxt.js dev-modules - */ - devModules: [ - ], + ** Nuxt.js dev-modules + */ + devModules: [], /* - ** Nuxt.js modules - */ - modules: [ - ], + ** Nuxt.js modules + */ + modules: [], /* - ** Build configuration - */ + ** Build configuration + */ build: { /* - ** You can extend webpack config here - */ - extend (config, ctx) { + ** You can extend webpack config here + */ + extend(config, ctx) { // config.resolve.alias[0] }, - postcss:[ + postcss: [ // require('postcss-pxtorem')({ // rootValue: 200, // propList: ['*'] @@ -67,6 +78,6 @@ export default { // browsers: ['Android >= 4.0', 'iOS >= 7'] // }) ] - + } -} +} \ No newline at end of file diff --git a/pages-child/desc/index.vue b/pages-child/desc/index.vue index c425971..270ef49 100644 --- a/pages-child/desc/index.vue +++ b/pages-child/desc/index.vue @@ -1,53 +1,54 @@ diff --git a/pages-child/desc/pc.scss b/pages-child/desc/pc.scss index a1a4b19..4626f9e 100644 --- a/pages-child/desc/pc.scss +++ b/pages-child/desc/pc.scss @@ -1,53 +1,65 @@ -.wrapper{ +.wrapper { border-bottom: solid 1px #e2e2e2; + .descicon { - height: bq(105); - display: flex; + // min-height: bq(105); + // display: flex; + // display: inline-block; + // margin: 0 auto; + .item { + float: left; display: flex; align-items: center; - width: bq(273+156); + flex-direction: row; + width: bq(273+60); padding: bq(28) 0; - + .icon { width: bq(33); height: bq(33); margin: 0 bq(31); } - - .i0{ + + .i0 { background-image: url('/image/icon0.png'); background-size: 100% 100%; background-repeat: no-repeat; } - .i1{ + + .i1 { background-image: url('/image/icon1.png'); background-size: 100% 100%; background-repeat: no-repeat; } - .i2{ + + .i2 { background-image: url('/image/icon2.png'); background-size: 100% 100%; background-repeat: no-repeat; } - .i3{ + + .i3 { background-image: url('/image/icon3.png'); background-size: 100% 100%; background-repeat: no-repeat; } + .word { - line-height: bq(30 ); + line-height: bq(30); + .word__titile { color: #3175bb; font-size: bq(22); } - + .word__desc { + white-space: nowrap; font-size: bq(18); color: #8f8f8f; } } } } - -} + +} \ No newline at end of file diff --git a/pages-child/header/index.vue b/pages-child/header/index.vue index e607ae2..ca182a4 100644 --- a/pages-child/header/index.vue +++ b/pages-child/header/index.vue @@ -1,35 +1,34 @@ \ No newline at end of file diff --git a/pages-child/header/pc.scss b/pages-child/header/pc.scss index 3a9d568..a24c2be 100644 --- a/pages-child/header/pc.scss +++ b/pages-child/header/pc.scss @@ -1,4 +1,3 @@ - .header { position: absolute; left: 0; @@ -27,7 +26,7 @@ position: relative; display: inline-block; margin: 0 bq(18); - height: bq(43); + height: bq(50); &::after { content: ""; @@ -35,26 +34,28 @@ } } - .desc { + .header__desc { font-size: bq(12); - line-height: bq(18); - height: 80%; + line-height: bq(20); + // height: 80%; display: inline-block; color: #fff; + white-space: nowrap; } .navbar { color: #fff; padding-top: 0; margin-left: auto; + .navbar__item { float: left; cursor: grab; - margin: 0 bq(15); + margin: 0 bq(16); text-align: center; font-size: bq(16); line-height: bq(43); // width: 4em; } } -} +} \ No newline at end of file diff --git a/pages/index.vue b/pages/index.vue index 61d8b22..06b4cfa 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -4,106 +4,165 @@ + - -
区块链+|短视频系统
+ +
-
-
- -
+
+
+
-
-
-
+
+
+
+
+ + +
+
+
    +
  • +
    +
    +

    1.商业模式设计

    +
    • +
  • +
    +
    +

    2.品牌策划

    +
    • +
  • +
    +
    +

    3.产品规划

    +
    • +
  • +
    +
    +

    4.UI设计

    +
    • +
  • +
    +
    +

    5.产品开发

    +
    • +
  • +
    +
    +

    6.项目跟进

    +
    • +
  • +
    +
    +

    7.产品测试

    +
    • +
  • +
    +
    +

    8.交付上线

    +
    • +
  • +
    +
    +

    9.迭代优化

    +
    • +
+ + +
diff --git a/pages/pc.scss b/pages/pc.scss index 2158f2c..ade67a8 100644 --- a/pages/pc.scss +++ b/pages/pc.scss @@ -11,41 +11,141 @@ background-size: 100% 100%; background-repeat: no-repeat; overflow: hidden; - .banner__wrap{ + + .banner__wrap { width: bq(800); margin: 0 auto; - .banner__title{ + + .banner__title { + box-sizing: content-box; + margin-top: bq(248); + width: bq(678); + text-align: left; + color: #fff; + // padding-right: bq(550); + font-size: bq(44); + font-weight: lighter; + line-height: bq(59.66); + letter-spacing: 0; + color: #ffffff; + } + + .banner__button { + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + margin-top: 40px; + width: bq(133); + height: bq(41); + line-height: bq(41); + font-size: bq(16); + text-align: center; + border-radius: bq(41); + color: #fff; + border: 1px solid #fff; + } + } + +} + +.dd { + margin: bq(38) 0 bq(38) 0; + display: inline-block; + + .d1 { + float: left; + padding: 0 bq(20); + font-size: bq(18); + font-weight: 400; + color: rgba(75, 75, 75, 1); + + &.border { + border-right: 1px solid rgba(143, 143, 143, 1); + } + } +} + +.hz_wrapper { + // height: bq(100); + margin-top: bq(40); + position: relative; + + .line { + position: absolute; + top: bq(77+30+14/2); + left: 0; + right: 0; + background-image: url('/image/xu.png'); + height: 1px; + } + + .fl__wraper { + .fl__item { + float: left; + position: relative; + top: 0; + min-width: bq(137); + margin-right: bq(10); + transition: .2s linear all; + + &:hover { + top: bq(-17); + } + + .fl__item__icon { box-sizing: content-box; - margin-top: bq(248); - width: bq(678); - text-align: left; - color: #fff; - // padding-right: bq(550); - font-size: bq(44); - font-weight: lighter; - line-height: bq(59.66); - letter-spacing: 0; - color: #ffffff; + width: bq(77); + height: bq(77); + background-image: url('/image/icon0.png'); + background-repeat: no-repeat; + background-position: center; + margin: 0 auto; + background-size: 100% 100%; + } + + .fl__item__circle { + margin: 0 auto; + margin-top: bq(30); + width: bq(15); + height: bq(15); + border: 2px solid #888888; + border-radius: 50%; + } + + .fl__item__name { + font-size: bq(20); + margin-top: bq(20); } - .banner__button{ - display: flex; - cursor: pointer; - align-items: center; - justify-content: center; - margin-top: 40px; - width: bq(133); - height: bq(41); - line-height: bq(41); - font-size: bq(16); - text-align: center; - border-radius: bq(41); - color: #fff; - border: 1px solid #fff; - } + } } - } -.swiperBox{ - height: bq(342); + +.swiperBox { + height: bq(458); + + /deep/ .swiper-button-prev { + background-image: url(/image/left.png); + background-size: 100% 100%; + left: 0; + width: bq(59); + height: bq(105); + transform: translateY(-25%); + } + + /deep/ .swiper-button-next { + background-image: url(/image/right.png); + background-size: 100% 100%; + right: 0; + width: bq(59); + height: bq(105); + transform: translateY(-25%); + } + + img { + width: 100%; + max-width: 100%; + height: 100%; + } } \ No newline at end of file diff --git a/static/image/left.png b/static/image/left.png new file mode 100644 index 0000000..d8c835b Binary files /dev/null and b/static/image/left.png differ diff --git a/static/image/right.png b/static/image/right.png new file mode 100644 index 0000000..4297c1b Binary files /dev/null and b/static/image/right.png differ diff --git a/static/image/形状 22.png b/static/image/xu.png similarity index 100% rename from static/image/形状 22.png rename to static/image/xu.png diff --git a/static/js/flexible.js b/static/js/flexible.js new file mode 100644 index 0000000..abe9bd8 --- /dev/null +++ b/static/js/flexible.js @@ -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); \ No newline at end of file