zsc/model_example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finish index

Browse Source
This commit is contained in:
winter_born
2026-04-21 01:09:38 +08:00
parent 539d89ffc0
commit 25573f5105
30 changed files with 4387 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
move/vue3/.gitignore vendored Normal file
View File

@@ -0,0 +1,39 @@
# 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
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.eslintcache
# Cypress
/cypress/videos/
/cypress/screenshots/
# Vitest
__screenshots__/
# Vite
*.timestamp-*-*.mjs

6
move/vue3/.prettierrc.json Normal file
View File

@@ -0,0 +1,6 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}

6
move/vue3/.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,6 @@
{
"recommendations": [
"Vue.volar",
"esbenp.prettier-vscode"
]
}

38
move/vue3/README.md Normal file
View File

@@ -0,0 +1,38 @@
# vue3
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Recommended Browser Setup
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
- Firefox:
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
## 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
```
### Compile and Minify for Production
```sh
npm run build
```

13
move/vue3/index.html Normal file
View 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>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

8
move/vue3/jsconfig.json Normal file
View File

@@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

3632
move/vue3/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

30
move/vue3/package.json Normal file
View File

@@ -0,0 +1,30 @@
{
"name": "vue3",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"format": "prettier --write --experimental-cli src/"
},
"dependencies": {
"axios": "^1.14.0",
"element-plus": "^2.13.6",
"pinia": "^3.0.4",
"pnpm": "^10.33.0",
"vue": "^3.5.31",
"vue-router": "^5.0.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.5",
"prettier": "3.8.1",
"sass": "^1.98.0",
"vite": "^8.0.3",
"vite-plugin-vue-devtools": "^8.1.1"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
}
}

BIN
move/vue3/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
move/vue3/public/个人中心.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
move/vue3/public/全部服务.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
move/vue3/public/搜索.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 856 B

BIN
move/vue3/public/数据分析.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
move/vue3/public/新闻.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
move/vue3/public/浏览数.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 842 B

BIN
move/vue3/public/点赞.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 697 B

BIN
move/vue3/public/评论.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 855 B

BIN
move/vue3/public/首页.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

8
move/vue3/src/App.vue Normal file
View File

@@ -0,0 +1,8 @@
<script setup>
</script>
<template>
<router-view></router-view>
</template>
<style scoped></style>

86
move/vue3/src/assets/base.css Normal file
View File

@@ -0,0 +1,86 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

1
move/vue3/src/assets/logo.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

35
move/vue3/src/assets/main.css Normal file
View File

@@ -0,0 +1,35 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

132
move/vue3/src/components/newbottom.vue Normal file
View File

@@ -0,0 +1,132 @@
<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
let contentlist = ref()
let headers = ref()
const requestpost = async (path) => {
let value = await axios.post(`http://124.93.196.45:10091/prod-api${path}`, {
username: "6dOMIgIU",
password: "0CYdq6Hn"
})
value = value.data
console.log(value)
return value
}
const requestget = async (path) => {
let value = await axios.get(`http://124.93.196.45:10091/prod-api${path}`)
console.log(value.data)
return value.data
}
onMounted(async () => {
contentlist.value = (await requestget("/press/press/list")).rows
.map(x => [x.cover, x.title, x.createTime, x.content, x.readNum, x.likeNum, x.commentNum])
console.log(contentlist.value)
headers.value = (await requestget("/api/rotation/list")).rows.map(x => [x.advImg, x.advTitle, x.appType])
})
</script>
<template>
<div class="content-div">
<div class="content-header">
<div>新闻分类</div>
</div>
<div class="content">
<div v-for="item in headers">
{{ item[2] }}
</div>
</div>
</div>
<h2 align="center">新闻列表</h2>
<div class="newlist">
<div v-for="item, index in contentlist" @click="goto(index)">
<img :src="`http://124.93.196.45:10091/${item[0]}`">
<div>
<div>{{ item[1] }}</div>
<div>{{ item[2] }}</div>
<div>
<div><img src="/public/浏览数.png">
<div>{{ item[4] }}</div>
</div>
<div>
<img src="/public/点赞.png">
<div>
{{ item[5] }}
</div>
</div>
<div>
<img src="/public/评论.png">
<div>
{{ item[6] }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.content-div {
height: 20vh;
margin: 10px;
padding: 10px;
border-radius: 10px;
background-color: white;
}
.content-header {
border-bottom: 1px solid black;
}
.content-header div {
font-size: 1.2rem;
margin: 5px;
padding-left: 5px;
border-left: 5px solid red;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.content div {
height: 60px;
text-align: center;
line-height: 60px;
}
.newlist {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 10px;
gap: 10px;
}
.newlist>div>img {
width: 100%;
height: 15vh;
}
.newlist>div>div>div:first-child {
font-size: 1.1rem;
font-weight: bold;
}
.newlist>div>div>div:not(:first-child) {
font-size: 0.8rem;
}
.newlist>div>div>div:nth-child(3) {
display: flex;
}
.newlist>div>div>div:nth-child(3) div {
display: flex;
}
.newlist>div>div>div:nth-child(3) div img {
height: 20px;
}
</style>

65
move/vue3/src/components/newmore.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const back = () => {
router.back()
}
const route = useRoute()
const data = JSON.parse(route.params.data)
console.log(data)
</script>
<template>
<h3 align="center">{{ data[1] }}</h3>
<div><img :src="`http://124.93.196.45:10091/${data[0]}`"></div>
<div class="etc">
<div>
<img src="/public/浏览数.png">
<div>{{ data[4] }}</div>
</div>
<div>
<img src="/public/点赞.png">
<div> {{ data[5] }}</div>
</div>
<div>
<img src="/public/评论.png">
<div> {{ data[6] }}
</div>
</div>
</div>
<div v-html="data[3]"></div>
<button @click="back()">
返回
</button>
</template>
<style>
#app {
background-color: #e3e3e3;
}
h3+div {
margin: 10px;
}
h3+div img {
width: 100%;
border-radius: 10px;
}
h3+div+div {
margin: 10px;
}
.etc,
.etc>div {
display: flex;
}
.etc>div img {
height: 3vh;
}
</style>

16
move/vue3/src/main.js Normal file
View File

@@ -0,0 +1,16 @@
import './assets/main.css'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
const app = createApp(App)
app.use(createPinia())
app.use(ElementPlus)
app.use(router)
app.mount('#app')

25
move/vue3/src/router/index.js Normal file
View File

@@ -0,0 +1,25 @@
import { createRouter, createWebHistory } from 'vue-router'
import index from '../views/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'index',
component: index,
},
{
path: '/newlist',
name: 'newlist',
component: () => import('../views/newlist.vue'),
},
{
path: '/newmore/:data?',
name: 'newmore',
component: () => import("@/components/newmore.vue")
}
],
})
export default router

12
move/vue3/src/stores/counter.js Normal file
View 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 }
})

155
move/vue3/src/views/index.vue Normal file
View File

@@ -0,0 +1,155 @@
<script setup>
import axios from "axios";
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router";
import newbottom from "@/components/newbottom.vue";
const router = useRouter()
let rotation = ref()
let requestget = async (path) => {
const text = await axios.get(`http://124.93.196.45:10091/prod-api${path}`)
console.log(text.data)
return text.data
}
let contentlist = ref()
let footerlist = ref(["首页", "全部服务", "数据分析", "新闻", "个人中心"])
const len = ref(7)
onMounted(async () => {
rotation.value = (await requestget("/api/rotation/list")).rows.map(x => x.advImg)
console.log(rotation.value)
contentlist.value = (await requestget("/api/service/list")).rows.map(x => [`http://124.93.196.45:10091${x.imgUrl}`, x.serviceType]).slice(0, len.value)
})
const more = async () => {
len.value += 4
contentlist.value = (await requestget("/api/service/list")).rows.map(x => [`http://124.93.196.45:10091${x.imgUrl}`, x.serviceType]).slice(0, len.value)
}
const gowhere = (index) => {
switch (index) {
case 3:
router.push("/newlist")
}
}
</script>
<template>
<div class="first"><img src="/public/搜索.png"><input type="text"><el-button>搜索</el-button></div>
<el-carousel height="20vh" indicator-position="none">
<el-carousel-item v-for="item, index in rotation" :key="index" style="border-radius: 10px;">
<img :src="`http://124.93.196.45:10091/${item}`" @click="goto(index)">
</el-carousel-item>
</el-carousel>
<div class="content">
<div v-for="item in contentlist">
<img :src="item[0]">
<div>{{ item[1] }}</div>
</div>
<div @click="more()">
<img src="/全部服务.png">
<div>更多服务</div>
</div>
</div>
<newbottom></newbottom>
<div class="footer">
<div v-for="value, index in footerlist" @click="gowhere(index)">
<img :src="`/${value}.png`">
<div>
{{ value }}
</div>
</div>
</div>
</template>
<style>
#app {
margin: 0;
padding: 0;
color: black;
background-color: #e3e3e3;
display: flex !important;
flex-direction: column;
}
.first {
margin: 10px;
height: 5vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 30px;
}
.first img {
height: 30px;
width: 30px;
}
.first input {
flex: 1;
height: 30px;
}
.el-carousel__container {
margin: 10px;
margin-top: 0;
}
.el-carousel__container img {
height: 20vh;
width: 100%;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
background-color: white;
border-radius: 10px;
margin: 10px;
padding: 5px;
}
.content div {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 10vh;
}
.content div img {
height: 40px;
width: 40px;
}
.footer {
display: flex;
justify-content: space-evenly;
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
padding: 5px;
}
.footer div {
display: flex;
flex-direction: column;
align-items: center;
}
.footer div:nth-child(1) {
color: cornflowerblue;
}
.footer div img {
height: 20px;
width: 20px;
}
.newlist>div>div>div:first-child {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

62
move/vue3/src/views/newlist.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import newbottom from "../components/newbottom.vue"
const router = useRouter()
const back = () => {
router.back()
}
let contentlist = ref()
const requestget = async (path) => {
let value = await axios.get(`http://124.93.196.45:10091/prod-api${path}`)
console.log(value.data)
return value.data
}
onMounted(async () => {
contentlist.value = (await requestget("/press/press/list")).rows
.map(x => [x.cover, x.title, x.createTime, x.content, x.readNum, x.likeNum, x.commentNum])
console.log(contentlist.value)
})
const goto = (index) => {
router.push({
name: "newmore",
params: {
data: JSON.stringify(contentlist.value[index])
}
})
}
</script>
<template>
<el-carousel height="20vh" indicator-position="none">
<el-carousel-item v-for="item, index in contentlist" :key="index" style="border-radius: 10px;">
<img :src="`http://124.93.196.45:10091/${item[0]}`" style="height: 20vh;width:100%; border-radius: 10px;"
@click="goto(index)">
</el-carousel-item>
</el-carousel>
<newbottom></newbottom>
<el-button @click="back()">
返回
</el-button>
</template>
<style>
#app {
padding: 0px;
color: black;
background-color: #e3e3e3;
display: felx !important;
flex-direction: column;
}
.el-carousel__container {
margin: 10px;
}
.el-button {
width: 100%;
position: fixed;
bottom: 0;
}
</style>

18
move/vue3/vite.config.js Normal file
View 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))
},
},
})