Skip to content

O
offical_web
Commit 3494a32b by wusiyi
Options

feat: 官网2.0样式优化

parent 2d8f595d
Showing with 105 additions and 125 deletions
package-lock.json
......@@ -60,7 +60,7 @@
"less": "^3.0.4",
"less-loader": "^5.0.0",
"mockjs": "^1.1.0",
"prettier": "^2.2.1",
"prettier": "^2.8.8",
"sass": "^1.58.3",
"sass-loader": "^10",
"stylus": "~0.54.7",
......@@ -14384,15 +14384,19 @@
}
},
"node_modules/prettier": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
"integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
"version": "2.8.8",
"resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-linter-helpers": {
......
src/assets/css/common.css
......@@ -1078,28 +1078,7 @@ ul li {
background-color: var(--background-color);
}
/* Element UI 主题色覆盖 - 使用全局主色 #eca217 */
:root {
--el-color-primary: #eca217;
--el-color-primary-light-1: #f0b84a;
--el-color-primary-light-2: #f4ce7d;
--el-color-primary-light-3: #f8e4b0;
--el-color-primary-light-4: #fcfae3;
--el-color-primary-light-5: #fef9f0;
--el-color-primary-light-6: #fffcf7;
--el-color-primary-light-7: #fffdfa;
--el-color-primary-light-8: #fffefc;
--el-color-primary-light-9: #fffefe;
--el-color-primary-dark-1: #d18f14;
--el-color-primary-dark-2: #b67d11;
--el-color-primary-dark-3: #9b6b0e;
--el-color-primary-dark-4: #80590b;
--el-color-primary-dark-5: #654708;
--el-color-primary-dark-6: #4a3505;
--el-color-primary-dark-7: #2f2303;
--el-color-primary-dark-8: #141100;
--el-color-primary-dark-9: #000000;
}
/* Element UI 主题色覆盖 - 颜色变量已在 src/styles/index.scss 中基于 $primary-color 生成 */
.el-button--text {
border-color: transparent;
......
src/components/footBanner.vue
<template>
<div class="footer-bg" v-if="bannerContent">
<div class="footer-bg flex items-center" v-if="bannerContent">
<div class="bg-left w-20 lg:w-1/4 h-10 lg:h-20"></div>
<div
class="footer-banner flex flex-col items-center place-content-between py-16">
class="footer-banner w-full flex flex-col items-center place-content-between py-16">
<div class="footer-text flex flex-col items-center mb-10">
<p
class="footer-title font-medium text-3xl lg:text-4xl mb-5 text-center text-gray-700 tracking-wide">
{{ bannerContent.title }}
</p>
<p
class="footer-description font-sm text-lg mt-2 text-center text-gray-500">
class="footer-description font-sm text-lg mt-4 text-center text-gray-500">
{{ bannerContent.description }}
</p>
</div>
<div class="footer-down flex items-center w-full place-content-between">
<div class="bg-left w-20 lg:w-72 h-10 lg:h-14"></div>
<button
class="footer-register-btn lg:w-48 w-24 h-10 lg:h-14 rounded-lg text-base lg:text-lg text-gray-700 cursor-pointer transition ease-in-out duration-300 hover:bg-primary-color hover:text-white"
@click="goToLogin">
立即使用
</button>
<div class="bg-right w-20 lg:w-72 h-10 lg:h-14"></div>
</div>
<button
class="footer-register-btn lg:w-48 w-24 h-10 lg:h-14 rounded-lg text-base lg:text-lg text-gray-700 cursor-pointer transition ease-in-out duration-300 hover:bg-primary-color hover:text-white"
@click="goToLogin">
立即使用
</button>
</div>
<div class="bg-right w-20 lg:w-1/4 h-10 lg:h-20"></div>
<Register :visible="registerDialog" @close="registerDialog = false" />
</div>
</template>
......@@ -89,15 +89,29 @@ export default {
</script>
<style scoped lang="scss">
.footer-register-btn {
border: 1px solid #efad32;
border: 1px solid var(--primary-color);
}
.footer-title {
color: var(--secondary-color);
}
.bg-left {
background-image: linear-gradient(to right, #efad32, #efad3270, #efad3200);
background-image: linear-gradient(
to right,
var(--el-color-primary-light-4),
var(--el-color-primary-light-8),
#ffffff00
);
}
.bg-right {
background-image: linear-gradient(to left, #efad32, #efad3270, #efad3200);
background-image: linear-gradient(
to left,
var(--el-color-primary-light-4),
var(--el-color-primary-light-8),
#ffffff00
);
}
.footer-register-btn:hover {
......
src/components/footer.vue
......@@ -314,8 +314,8 @@
<li>
<p
class="font-normal text-gray-400 inline-block w-full h-full text-sm text-white/65 cursor-pointer"
@click="copy('19145102877')">
<span class="mr-2">售前咨询电话:19145102877</span>
@click="copy('18103641690')">
<span class="mr-2">售前咨询电话:18103641690</span>
<i class="el-icon-document-copy"></i>
</p>
</li>
......
src/components/head.vue
......@@ -41,7 +41,6 @@
<div class="left-content">
<div
class="left-content-item"
:class="{ lfActive: $route.path === child.path }"
v-for="child in item.children"
:key="child.path">
<a :href="child.path" class="item-router">
......@@ -70,50 +69,7 @@
</a> -->
</div>
</div>
<div
class="navbar-panel navbar-panel-support"
v-if="item.path === '/support'">
<div class="navbar-panel-left">
<div class="left-title">
<span>资源</span>
</div>
<div class="left-content">
<div
class="left-content-item"
:class="{ lfActive: $route.path === child.path }"
v-for="(child, index) in item.children"
:key="index">
<a :href="child.path" class="item-router">
<img :src="child.icon" />
<div class="content-name">
<div class="name">{{ child.name }}</div>
<div class="sub-title">{{ child.subTitle }}</div>
</div>
</a>
</div>
</div>
</div>
<div class="navbar-panel-right">
<div class="right-title">
<span>支持</span>
</div>
<div class="right-content">
<div
class="right-content-item"
:class="{ lfActive: $route.path === '/help' }">
<a class="item-router" href="/help">
<img src="../assets/images/product/help.svg" />
<div class="content-name">
<div class="name">帮助中心</div>
<div class="sub-title">
快速上手产品,获取使用问题的答案
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div
class="navbar-panel navbar-panel-about"
v-if="item.path === '/about'">
......@@ -597,9 +553,7 @@ export default {
&:hover {
background-color: var(--background-color);
}
&.lfActive {
background-color: var(--darker-background-color);
}
img {
width: 30px;
vertical-align: middle;
......@@ -704,9 +658,6 @@ export default {
&:hover {
background-color: #f8f9ff;
}
&.lfActive {
background-color: #eef1ff;
}
}
}
.navbar-panel.navbar-panel-about {
......
src/styles/index.scss
$primary-color: #fd6701;
$secondary-color: #00205a;
:root {
--primary-color: #eca217;
--secondary-color: #3f419e;
--secondary-color-lighter: #6163da;
--border-color: #f3ecd6;
--shadow-color: rgba(216, 187, 26, 0.32);
--background-color: #faf7f2b0;
--darker-background-color: #f5ede0b0;
--light-color: #e9b95f;
--light-background-color: #fff8ec;
--darker-text-color: #faaa15;
--hover-color: #eeb242;
--primary-color: #{$primary-color};
--border-color: #{rgba(mix(rgb(219, 219, 219), $primary-color, 80%), 0.3)};
--shadow-color: #{rgba($primary-color, 0.3)};
--light-color: #{lighten($primary-color, 20%)};
--darker-text-color: #{darken($primary-color, 5%)};
--hover-color: #{lighten($primary-color, 10%)};
--background-color: #{rgba(mix(rgb(247, 247, 247), $primary-color, 90%), 0.3)};
--light-background-color: #{lighten($primary-color, 45%)};
--secondary-color: #{$secondary-color};
--secondary-text-color: #{darken($secondary-color, 5%)};
--secondary-color-lighter: #{lighten($secondary-color, 10%)};
--secondary-text-color: #122a88;
/* Element UI 主题色 - 基于 $primary-color 生成 */
--el-color-primary: #{$primary-color};
--el-color-primary-light-1: #{mix(white, $primary-color, 10%)};
--el-color-primary-light-2: #{mix(white, $primary-color, 20%)};
--el-color-primary-light-3: #{mix(white, $primary-color, 30%)};
--el-color-primary-light-4: #{mix(white, $primary-color, 40%)};
--el-color-primary-light-5: #{mix(white, $primary-color, 50%)};
--el-color-primary-light-6: #{mix(white, $primary-color, 60%)};
--el-color-primary-light-7: #{mix(white, $primary-color, 70%)};
--el-color-primary-light-8: #{mix(white, $primary-color, 80%)};
--el-color-primary-light-9: #{mix(white, $primary-color, 90%)};
--el-color-primary-dark-1: #{mix(black, $primary-color, 10%)};
--el-color-primary-dark-2: #{mix(black, $primary-color, 20%)};
--el-color-primary-dark-3: #{mix(black, $primary-color, 30%)};
--el-color-primary-dark-4: #{mix(black, $primary-color, 40%)};
--el-color-primary-dark-5: #{mix(black, $primary-color, 50%)};
--el-color-primary-dark-6: #{mix(black, $primary-color, 60%)};
--el-color-primary-dark-7: #{mix(black, $primary-color, 70%)};
--el-color-primary-dark-8: #{mix(black, $primary-color, 80%)};
--el-color-primary-dark-9: #{mix(black, $primary-color, 90%)};
}
@tailwind base;
......
src/views/homePage/index.vue
<template>
<div class="home-page">
<div
class="banner w-11/12 lg:w-9/12 mx-auto lg:px-5 lg:py-20"
class="banner w-11/12 lg:w-8/12 mx-auto lg:px-5 lg:py-20"
:class="{ loged: userInfo }">
<div
class="banner-container flex h-full flex-col items-center mt-8 mb-10 lg:flex-row lg:justify-between lg:items-center lg:mt-0 gap-4 lg:gap-40"
class="banner-container flex h-full flex-col items-center mt-8 mb-10 lg:flex-row lg:justify-between lg:items-center lg:mt-0 gap-4 lg:gap-5"
:class="{ 'lg:flex-col': userInfo }">
<div
class="left-content w-full lg:w-3/5 flex flex-col gap-5 mb-4 lg:mb-0"
class="left-content w-full flex flex-col gap-10 mb-4 lg:mb-0"
:class="{ 'lg:w-full': userInfo }">
<h3
class="left-content-title text-base lg:text-2xl font-bold text-center lg:text-left"
class="left-content-title text-base lg:text-3xl font-bold text-center lg:text-left"
:class="{ 'lg:text-center': userInfo }">
让跨境电商更智能
</h3>
<h2
class="left-content-title-high-light text-2xl lg:text-4xl font-bold text-center lg:text-left"
class="text-2xl lg:text-4xl font-bold text-center lg:text-left"
:class="{ 'lg:text-center': userInfo }">
九猫科技·全球电商增长伙伴
<span class="left-content-title-high-light">九猫科技</span>
<span class="text-gray-600">·全球电商增长伙伴</span>
</h2>
<p
class="left-content-description text-sm lg:text-lg text-gray-500 text-center lg:text-left"
<div
class="left-content-description flex flex-col gap-4 lg:gap-7 text-sm lg:text-xl text-gray-600 text-center lg:text-left"
:class="{ 'lg:text-center': userInfo }">
<span>
跨境全链路智能解决方案，一站式跨境电商操作系统
<br />
</span>
<span class="high-light font-bold">20+</span>
<span>主流跨境平台，助力卖家全球出海</span>
</p>
<p>
<span>跨境全链路智能解决方案，一站式跨境电商操作系统</span>
</p>
<p>
<span class="high-light font-bold">20+</span>
<span>主流跨境平台，助力卖家全球出海</span>
</p>
</div>
<button
class="register-btn-text block mx-auto lg:mx-0 w-20 h-8 lg:w-36 lg:h-11 rounded-md text-xs lg:text-lg cursor-pointer text-white"
:class="{ hidden: userInfo }"
......@@ -131,6 +135,10 @@ export default {
}
}
.left-content-title {
color: var(--secondary-text-color);
}
.left-content-title-high-light {
color: var(--darker-text-color);
}
......
src/views/homePage/login.vue
<template>
<div class="w-full flex justify-center">
<div class="w-full flex justify-end">
<div
class="login-content lg:px-10 py-6 shadow-lg lg:shadow-lg flex flex-col rounded-4xl">
<div
......
src/views/homePage/platform.vue
......@@ -81,7 +81,7 @@ export default {
.docking-platform {
width: 100%;
height: 150px;
background: var(--light-color);
background: var(--background-color);
}
.warp {
......@@ -108,6 +108,6 @@ export default {
.platform-image {
width: 80%;
transition: filter 0.3s ease;
filter: brightness(0) invert(1);
filter: grayscale(100%) brightness(0.6) contrast(0.2);
}
</style>
src/views/login.vue
......@@ -273,7 +273,7 @@
<script>
import { post, get } from '../utils/axios'
import md5 from 'js-md5'
import {mapMutations, mapState} from 'vuex'
import {mapMutations} from 'vuex'
export default {
name: 'login',
components: {},
......
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