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