build: init
This commit is contained in:
zc
commit
fbf98f1c12
8
.editorconfig
Normal file
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
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
||||
* text=auto eol=lf
|
||||
30
.gitignore
vendored
Normal file
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
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
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
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
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
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
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
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
9
src/App.vue
Normal file
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
BIN
src/assets/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
BIN
src/assets/city.jpg
Normal file
BIN
src/assets/city.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
BIN
src/assets/complete.png
Normal file
BIN
src/assets/complete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/ice.jpg
Normal file
BIN
src/assets/ice.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
1
src/assets/logo.svg
Normal file
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
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
BIN
src/assets/shop.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
BIN
src/assets/user.jpg
Normal file
BIN
src/assets/user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
14
src/main.ts
Normal file
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
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
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
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
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
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
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
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
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
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
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
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
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
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))
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user