build: init
8
.editorconfig
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
|
||||||
|
charset = utf-8
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
end_of_line = lf
|
||||||
|
max_line_length = 100
|
||||||
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
* text=auto eol=lf
|
||||||
30
.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
6
.prettierrc.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100
|
||||||
|
}
|
||||||
8
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"Vue.volar",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"EditorConfig.EditorConfig",
|
||||||
|
"esbenp.prettier-vscode"
|
||||||
|
]
|
||||||
|
}
|
||||||
39
README.md
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
# website
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
22
eslint.config.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { globalIgnores } from 'eslint/config'
|
||||||
|
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
|
||||||
|
import pluginVue from 'eslint-plugin-vue'
|
||||||
|
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
|
||||||
|
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
|
||||||
|
// import { configureVueProject } from '@vue/eslint-config-typescript'
|
||||||
|
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
|
||||||
|
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
|
||||||
|
|
||||||
|
export default defineConfigWithVueTs(
|
||||||
|
{
|
||||||
|
name: 'app/files-to-lint',
|
||||||
|
files: ['**/*.{ts,mts,tsx,vue}'],
|
||||||
|
},
|
||||||
|
|
||||||
|
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
|
||||||
|
|
||||||
|
pluginVue.configs['flat/essential'],
|
||||||
|
vueTsConfigs.recommended,
|
||||||
|
skipFormatting,
|
||||||
|
)
|
||||||
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>杭州优品尚</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
46
package.json
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"name": "website",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"engines": {
|
||||||
|
"node": "^20.19.0 || >=22.12.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check \"build-only {@}\" --",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --build",
|
||||||
|
"lint": "eslint . --fix",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"pinia": "^3.0.3",
|
||||||
|
"vue": "^3.5.18",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tsconfig/node22": "^22.0.2",
|
||||||
|
"@types/node": "^22.16.5",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.1",
|
||||||
|
"@vue/eslint-config-prettier": "^10.2.0",
|
||||||
|
"@vue/eslint-config-typescript": "^14.6.0",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
|
"eslint": "^9.31.0",
|
||||||
|
"eslint-plugin-vue": "~10.3.0",
|
||||||
|
"jiti": "^2.4.2",
|
||||||
|
"npm-run-all2": "^8.0.4",
|
||||||
|
"prettier": "3.6.2",
|
||||||
|
"sass": "^1.92.1",
|
||||||
|
"sass-loader": "^16.0.5",
|
||||||
|
"typescript": "~5.8.0",
|
||||||
|
"vite": "^7.0.6",
|
||||||
|
"vite-plugin-vue-devtools": "^8.0.0",
|
||||||
|
"vue-tsc": "^3.0.4"
|
||||||
|
},
|
||||||
|
"volta": {
|
||||||
|
"node": "24.6.0",
|
||||||
|
"yarn": "1.22.22"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
9
src/App.vue
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterView } from 'vue-router'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<RouterView />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
BIN
src/assets/banner.jpg
Normal file
|
After Width: | Height: | Size: 431 KiB |
BIN
src/assets/city.jpg
Normal file
|
After Width: | Height: | Size: 272 KiB |
BIN
src/assets/complete.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/ice.jpg
Normal file
|
After Width: | Height: | Size: 470 KiB |
1
src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
98
src/assets/main.scss
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
// 基础变量
|
||||||
|
$primary-color: #f5a623;
|
||||||
|
$text-color: #333;
|
||||||
|
$text-light: #666;
|
||||||
|
$text-lighter: #999;
|
||||||
|
$border-color: #eee;
|
||||||
|
$bg-color: #f5f5f5;
|
||||||
|
|
||||||
|
// 基础样式
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Microsoft YaHei', sans-serif;
|
||||||
|
color: $text-color;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 15px;
|
||||||
|
.section-title {
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮样式
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&-primary {
|
||||||
|
background-color: $primary-color;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid $primary-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($primary-color, 10%);
|
||||||
|
border-color: darken($primary-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-outline {
|
||||||
|
background-color: transparent;
|
||||||
|
color: $primary-color;
|
||||||
|
border: 1px solid $primary-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $primary-color;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标样式
|
||||||
|
.iconfont {
|
||||||
|
font-family: 'iconfont' !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 间距
|
||||||
|
.mb-20 {
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-30 {
|
||||||
|
margin-bottom: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-40 {
|
||||||
|
margin-bottom: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-20 {
|
||||||
|
margin-top: 20px !important;
|
||||||
|
}
|
||||||
BIN
src/assets/shop.jpg
Normal file
|
After Width: | Height: | Size: 248 KiB |
BIN
src/assets/user.jpg
Normal file
|
After Width: | Height: | Size: 416 KiB |
14
src/main.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import './assets/main.scss'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
17
src/router/index.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
name: 'home',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (About.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () => import('../views/home/index.vue'),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
12
src/stores/counter.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useCounterStore = defineStore('counter', () => {
|
||||||
|
const count = ref(0)
|
||||||
|
const doubleCount = computed(() => count.value * 2)
|
||||||
|
function increment() {
|
||||||
|
count.value++
|
||||||
|
}
|
||||||
|
|
||||||
|
return { count, doubleCount, increment }
|
||||||
|
})
|
||||||
28
src/views/home/components/aboutus.vue
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<div id="about-us-wrap" style="padding-top: 60px; padding-bottom: 60px">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">优品尚电商</h2>
|
||||||
|
<p class="section-subtitle">杭州优品尚电商科技有限公司</p>
|
||||||
|
<p class="about-us-section">
|
||||||
|
杭州优品尚电商科技有限公司成立于2025年9月,是一家新兴的互联网电商企业,致力于打造一个以信任为核心、品质为基石的综合性电商平台。公司立足杭州,面向全国,专注于构建覆盖微信小程序、PC端的多端融合购物场景,为用户提供便捷、安全、优质的消费体验。
|
||||||
|
</p>
|
||||||
|
<p class="about-us-section">
|
||||||
|
优品尚电商以“用户至上,品质为先”为经营理念,严格筛选合作商家与商品,确保每一件产品都经过严格把控,让消费者买得放心、用得安心。平台不仅注重商品性价比,更强调服务与信任,通过透明化的交易流程、高效的售后保障和个性化的推荐服务,建立用户与平台之间的长期信赖关系。
|
||||||
|
</p>
|
||||||
|
<p class="about-us-section">
|
||||||
|
作为一家初创企业,优品尚电商以创新为驱动,技术为支撑,未来将持续优化平台功能,拓展更多优质品类,力争成为用户心中“值得信赖的购物首选平台”,推动电商行业向更健康、更透明的方向发展。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
#about-us-wrap {
|
||||||
|
.about-us-section {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
58
src/views/home/components/banner.vue
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div id="banner-wrap">
|
||||||
|
<div class="banner-bg">
|
||||||
|
<div class="banner-content">
|
||||||
|
<h1 style="margin-top: -40px">
|
||||||
|
<p>优品尚</p>
|
||||||
|
<p style="font-size: 20px; margin-top: 10px">用户至上、品质优先、诚信经营</p>
|
||||||
|
<p style="font-size: 12px">Customer First, Quality Priority, Integrity Operation</p>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup></script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#banner-wrap {
|
||||||
|
position: relative;
|
||||||
|
height: 500px;
|
||||||
|
overflow: hidden;
|
||||||
|
h1 {
|
||||||
|
font-weight: normal;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url('../../../assets/banner.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
filter: brightness(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba($color: #02084e, $alpha: 0.4);
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
font-size: 36px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
43
src/views/home/components/footer.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div id="footer-wrap">
|
||||||
|
<h3>公司名称:杭州优品尚电商科技有限公司</h3>
|
||||||
|
<ul>
|
||||||
|
<li>手机:15158108601</li>
|
||||||
|
<li>邮箱:2064281269@qq.com</li>
|
||||||
|
<li>备案号:浙ICP备2025153580号-1</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
#footer-wrap {
|
||||||
|
padding: 15px 0;
|
||||||
|
background-color: #30385a;
|
||||||
|
font-size: 13px;
|
||||||
|
h3 {
|
||||||
|
color: #eee;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin-top: 20px;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #eee;
|
||||||
|
li {
|
||||||
|
padding-right: 15px;
|
||||||
|
height: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
li + li {
|
||||||
|
padding-left: 15px;
|
||||||
|
border-left: 1px solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
76
src/views/home/components/header.vue
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<header id="header-wrap">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<span style="font-weight: normal; font-size: 18px">杭州优品尚电商科技有限公司</span>
|
||||||
|
</div>
|
||||||
|
<nav class="nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#header-wrap">首页</a></li>
|
||||||
|
<li><a href="#product-wrap">产品中心</a></li>
|
||||||
|
<li><a href="#solution-wrap">解决方案</a></li>
|
||||||
|
<li><a href="#about-us-wrap">关于我们</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup></script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#header-wrap {
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 60px;
|
||||||
|
min-width: 1000px;
|
||||||
|
max-width: 1500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav ul {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-left: 30px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
194
src/views/home/components/product.vue
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
<template>
|
||||||
|
<section id="product-wrap">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">产品中心</h2>
|
||||||
|
<p class="section-subtitle">深耕数据安全领域,构建全方位的数据安全防护体系</p>
|
||||||
|
|
||||||
|
<ul class="product-categories">
|
||||||
|
<li
|
||||||
|
v-for="(category, index) in categories"
|
||||||
|
:key="index"
|
||||||
|
:class="['category-item', { active: activeCategory === index }]"
|
||||||
|
@click="changeCategory(index)"
|
||||||
|
>
|
||||||
|
{{ category }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="product-grid">
|
||||||
|
<div v-for="(product, index) in products[activeCategory]" :key="index" class="product-item">
|
||||||
|
<div class="product-icon">
|
||||||
|
<img src="@/assets/complete.png" :alt="product.title" />
|
||||||
|
</div>
|
||||||
|
<div class="product-info">
|
||||||
|
<h3>{{ product.title }}</h3>
|
||||||
|
<p>{{ product.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const products = [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: '多端覆盖',
|
||||||
|
description:
|
||||||
|
'全面支持微信小程序和PC端双平台,实现多设备无缝切换,让用户随时随地享受流畅的智能购物体验。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '智能推荐',
|
||||||
|
description:
|
||||||
|
'基于深度学习算法精准分析用户浏览行为和购买偏好,个性化推送最符合需求的商品,提升购物效率。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '极简操作',
|
||||||
|
description:
|
||||||
|
'采用直观流畅的界面设计,优化购物流程至三步完成,特别适配各年龄段用户,大幅降低使用门槛。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '无忧售后',
|
||||||
|
description:
|
||||||
|
'提供7×24小时专业客服支持,承诺48小时内快速处理退换货,建立先行赔付机制保障用户权益。',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: '严格审核',
|
||||||
|
description:
|
||||||
|
'入驻商户需提供12项资质证明,经过三部门联合审查,确保100%合法合规经营,从源头保障商品质量。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '信誉评级',
|
||||||
|
description:
|
||||||
|
'建立包含商品质量、服务响应等20个维度的动态评分系统,月度更新并向用户公示,激励商家提升服务。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '透明交易',
|
||||||
|
description:
|
||||||
|
'强制商家提供权威质检报告,订单物流信息实时同步可追溯,杜绝虚假宣传,确保交易真实可信。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '诚信保障',
|
||||||
|
description:
|
||||||
|
'设立百万保证金制度,对售假刷单等违规行为零容忍,违规商户永久列入黑名单并公示处理结果。',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: '加密存储',
|
||||||
|
description:
|
||||||
|
'采用AES-256金融级加密算法,对敏感数据分段存储和动态脱敏,确保即使泄露也无法被识别使用。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '隐私合规',
|
||||||
|
description:
|
||||||
|
'严格遵循38项数据安全法规,建立数据全生命周期管理机制,确保用户隐私权利得到充分保护。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '风控系统',
|
||||||
|
description:
|
||||||
|
'部署基于机器学习的智能监测系统,实时识别132种网络威胁,实现毫秒级响应,防范欺诈行为。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '权限管控',
|
||||||
|
description:
|
||||||
|
'实行RBAC权限管理体系,所有数据访问需多重身份验证,操作全程留痕可审计,杜绝内部滥用。',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]
|
||||||
|
|
||||||
|
const categories = ['用户便利', '商户信用', '数据安全']
|
||||||
|
const activeCategory = ref(0)
|
||||||
|
// 切换分类
|
||||||
|
const changeCategory = (index: number) => {
|
||||||
|
activeCategory.value = index
|
||||||
|
// 这里可以根据分类过滤产品
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#product-wrap {
|
||||||
|
padding: 60px 0;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.product-categories {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
.category-item {
|
||||||
|
padding: 5px 30px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 2px solid #eee;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #f5a623;
|
||||||
|
border-color: #f5a623;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #f5a623;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.product-item {
|
||||||
|
border: 1px solid #eee;
|
||||||
|
padding: 0 20px 0 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
height: 150px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-icon {
|
||||||
|
min-width: 60px;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 auto 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f5a623;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 25px;
|
||||||
|
max-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.product-info {
|
||||||
|
margin-left: 20px;
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
120
src/views/home/components/solution.vue
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
<template>
|
||||||
|
<section id="solution-wrap">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">解决方案</h2>
|
||||||
|
<p class="section-subtitle">深入剖析行业痛点,量身打造定制化的解决方案</p>
|
||||||
|
|
||||||
|
<div class="solution-cards">
|
||||||
|
<div class="solution-card" v-for="(solution, index) in solutions" :key="index">
|
||||||
|
<div class="card-image">
|
||||||
|
<img :src="solution.image" :alt="solution.title" />
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<h3>{{ solution.title }}</h3>
|
||||||
|
<p>{{ solution.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import userImg from '@/assets/user.jpg'
|
||||||
|
import shopImg from '@/assets/shop.jpg'
|
||||||
|
import cityImg from '@/assets/city.jpg'
|
||||||
|
const solutions = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '用户角度',
|
||||||
|
description: '汇聚海量优质商品,坚持信息透明化与品质至上原则,让每一位用户都能安心选购。',
|
||||||
|
image: userImg,
|
||||||
|
industry: 'Government Industry',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '零售业角度',
|
||||||
|
description:
|
||||||
|
'打破地域限制,显著降低商家运营成本,并通过智能数据分析持续优化库存管理与选品策略。',
|
||||||
|
image: shopImg,
|
||||||
|
industry: 'Electric Power Industry',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '制造业角度',
|
||||||
|
description: '收集和分析海量的终端消费数据,理清需求趋势,适应市场变化和按需生产',
|
||||||
|
image: cityImg,
|
||||||
|
industry: 'Financial Industry',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#solution-wrap {
|
||||||
|
padding: 60px 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
|
||||||
|
url('@/assets/ice.jpg') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 0 -300px;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solution-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 30px;
|
||||||
|
|
||||||
|
.solution-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
height: 180px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
19
src/views/home/index.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<Header />
|
||||||
|
<Banner />
|
||||||
|
<ProductSection />
|
||||||
|
<SolutionSection />
|
||||||
|
<aboutUsSection />
|
||||||
|
<footerSection />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import Header from './components/header.vue'
|
||||||
|
import Banner from './components/banner.vue'
|
||||||
|
import ProductSection from './components/product.vue'
|
||||||
|
import SolutionSection from './components/solution.vue'
|
||||||
|
import aboutUsSection from './components/aboutus.vue'
|
||||||
|
import footerSection from './components/footer.vue'
|
||||||
|
</script>
|
||||||
12
tsconfig.app.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
19
tsconfig.node.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"extends": "@tsconfig/node22/tsconfig.json",
|
||||||
|
"include": [
|
||||||
|
"vite.config.*",
|
||||||
|
"vitest.config.*",
|
||||||
|
"cypress.config.*",
|
||||||
|
"nightwatch.conf.*",
|
||||||
|
"playwright.config.*",
|
||||||
|
"eslint.config.*"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"noEmit": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
18
vite.config.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueDevTools(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||