mobile
20
.eslintrc.cjs
Normal file
@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
8
README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
1
css/App.css
Normal file
@ -0,0 +1 @@
|
||||
/*# sourceMappingURL=./App.css.map */
|
1
css/App.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../src/App.less"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,qBAAA"}
|
28
index.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI软著引擎</title>
|
||||
<!-- 解决移动端延迟问题 -->
|
||||
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
|
||||
<script>
|
||||
if ('addEventListener' in document) {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
FastClick.attach(document.body);
|
||||
}, false);
|
||||
}
|
||||
if (!window.Promise) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
7978
package-lock.json
generated
Normal file
38
package.json
Normal file
@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "vite-project",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"antd-mobile": "^5.38.1",
|
||||
"axios": "^1.7.8",
|
||||
"china-area-data": "^5.0.1",
|
||||
"china-division": "^2.7.0",
|
||||
"china-region": "^1.4.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
"less": "^4.2.1",
|
||||
"less-loader": "^12.2.0",
|
||||
"rc-picker": "^4.8.3",
|
||||
"react": "^18.2.0",
|
||||
"react-device-detect": "^2.2.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.28.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
1
public/vite.svg
Normal file
After Width: | Height: | Size: 11 KiB |
10
src/App.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
// import React from 'react'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div>
|
||||
<Outlet></Outlet>
|
||||
</div>
|
||||
)
|
||||
}
|
5
src/App.less
Normal file
@ -0,0 +1,5 @@
|
||||
// .box{
|
||||
// width: 375px;
|
||||
// height: 100px;
|
||||
// background-color: red;
|
||||
// }
|
1
src/declarations.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module 'china-area-data';
|
40
src/index.css
Normal file
@ -0,0 +1,40 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
/* 隐藏滚动条宽度 */
|
||||
::-webkit-scrollbar{
|
||||
width: 0;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'xianglifang';
|
||||
src: url('./static/font/xianglifang.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'HONORSansCN';
|
||||
src: url('./static/font/HONORSansCN.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'JiangChengYuanTi';
|
||||
src: url('./static/font/JiangChengYuanTi.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'KingnamBobo';
|
||||
src: url('./static/font/KingnamBobo.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'xianglifang';
|
||||
src: url('./static/font/xianglifang.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
14
src/main.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import './index.css'
|
||||
import router from './router/index'
|
||||
import { isMobile } from 'react-device-detect';
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
router
|
||||
)
|
||||
// 判断设备类型并进行相应的跳转
|
||||
if (isMobile) {
|
||||
// 如果是移动设备,不进行任何操作,继续渲染当前路由
|
||||
} else {
|
||||
// 如果是PC设备,跳转到其他网址
|
||||
window.location.href = 'https://www.aimzhu.com/';
|
||||
}
|
34
src/request/api.js
Normal file
@ -0,0 +1,34 @@
|
||||
|
||||
import { appUrl, request } from './request'
|
||||
|
||||
// 获取验证码
|
||||
export const GetCode = (phone) => request.get(`/operator/api/verify/code/send/${phone}`)
|
||||
// 登录
|
||||
export const DoLogin = (params) => request.post('/operator/api/quick/login/phone', params)
|
||||
// 获取列表
|
||||
export const GetList = (params) => request.get('/copyright/app/proj/listpage/self',{params})
|
||||
// 创建项目
|
||||
export const CreateProj = (params) => request.post('/copyright/app/proj/create-quick', params)
|
||||
|
||||
// 新建联系人
|
||||
export const CreateContact = (params) => request.post('/copyright/app/proj-contact/save', params)
|
||||
// 新建所属者
|
||||
export const CreateOwner = (params) => request.post('/copyright/app/proj-owner/save', params)
|
||||
// 获取随机客服编号
|
||||
export const GetCsa = () => request.get('/copyright/app/csa/get')
|
||||
// 获取所属人列表
|
||||
export const GetOwnerList = (params) => request.get('/copyright/app/proj-owner/listpage/self',{params})
|
||||
// 获取联系人列表
|
||||
export const GetContactList = (params) => request.get('/copyright/app/proj-contact/listpage/self',{params})
|
||||
// 返回带 baseURL 的下载网址
|
||||
export const GetDownloadUrl = () => {
|
||||
// 获取 baseURL
|
||||
const baseURL = appUrl;
|
||||
return `${baseURL}/api/contract/management/download/`
|
||||
|
||||
// 拼接 baseURL 和 path
|
||||
// const downloadUrl = `${baseURL}/copyright/app/proj-contact/listpage/self/${path}`;
|
||||
|
||||
// 返回生成的下载网址
|
||||
|
||||
};
|
33
src/request/request.js
Normal file
@ -0,0 +1,33 @@
|
||||
import axios from "axios";
|
||||
const loginUrl = 'http://192.168.0.15:8091'
|
||||
const appUrl = 'http://192.168.0.15:7025'
|
||||
|
||||
|
||||
const request = axios.create({
|
||||
// baseURL: baseUrl,
|
||||
timeout: 5000,
|
||||
});
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
|
||||
let token = sessionStorage.getItem('token')
|
||||
config.baseURL = token ? appUrl : loginUrl; // 根据token切换请求地址
|
||||
// 设置请求头
|
||||
if (token) {
|
||||
config.headers = config.headers || {}
|
||||
config.headers['token'] = token
|
||||
}
|
||||
return config;
|
||||
},
|
||||
|
||||
(err) => Promise.reject(err)
|
||||
);
|
||||
request.interceptors.response.use(
|
||||
(res) => {
|
||||
return res.data;
|
||||
},
|
||||
(err) => Promise.reject(err)
|
||||
);
|
||||
|
||||
export { appUrl, request };
|
||||
// export default request
|
21
src/router/index.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import App from '@/App'
|
||||
import Home from '@/views/Home/Home'
|
||||
import Login from '@/views/Login/Login'
|
||||
import List from '@/views/List/List'
|
||||
import Use from '@/views/Use/Use'
|
||||
import Detail from '@/views/Detail/Detail'
|
||||
const router = (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<App></App>}>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/list" element={<List />} />
|
||||
<Route path="/use" element={<Use />} />
|
||||
<Route path="/detail" element={<Detail />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
export default router
|
BIN
src/static/font/DengXian.ttf
Normal file
BIN
src/static/font/HONORSansCN.ttf
Normal file
BIN
src/static/font/JiangChengYuanTi.ttf
Normal file
BIN
src/static/font/KingnamBobo.ttf
Normal file
BIN
src/static/font/xianglifang.ttf
Normal file
BIN
src/static/images/Detail/book.png
Normal file
After Width: | Height: | Size: 259 KiB |
BIN
src/static/images/Detail/center.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
BIN
src/static/images/Detail/down.png
Normal file
After Width: | Height: | Size: 972 B |
BIN
src/static/images/Detail/file.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
src/static/images/Detail/pen.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
src/static/images/Detail/time.png
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
src/static/images/Home/background.png
Normal file
After Width: | Height: | Size: 12 MiB |
BIN
src/static/images/Home/bannerBack.png
Normal file
After Width: | Height: | Size: 163 KiB |
BIN
src/static/images/Home/book.png
Normal file
After Width: | Height: | Size: 362 KiB |
BIN
src/static/images/Home/coupon.png
Normal file
After Width: | Height: | Size: 53 KiB |
BIN
src/static/images/Home/couponBack.png
Normal file
After Width: | Height: | Size: 331 KiB |
BIN
src/static/images/Home/numBack.png
Normal file
After Width: | Height: | Size: 4.3 KiB |
BIN
src/static/images/Home/title.png
Normal file
After Width: | Height: | Size: 266 KiB |
BIN
src/static/images/List/list.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
src/static/images/List/people.png
Normal file
After Width: | Height: | Size: 3.1 KiB |
BIN
src/static/images/Login/background.png
Normal file
After Width: | Height: | Size: 830 KiB |
BIN
src/static/images/Use/back.png
Normal file
After Width: | Height: | Size: 4.2 MiB |
BIN
src/static/images/Use/date.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
src/static/images/Use/people.png
Normal file
After Width: | Height: | Size: 724 KiB |
81
src/views/Detail/Detail.jsx
Normal file
@ -0,0 +1,81 @@
|
||||
// import React from 'react'
|
||||
import { useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import './detail.less'
|
||||
import { GetDownloadUrl } from '../../request/api'
|
||||
import {
|
||||
Button,
|
||||
} from 'antd-mobile'
|
||||
import pen from '@/static/images/Detail/pen.png'
|
||||
import center from '@/static/images/Detail/center.png'
|
||||
import file from '@/static/images/Detail/file.png'
|
||||
export default function Detail() {
|
||||
const nav = useNavigate()
|
||||
const location = useLocation();
|
||||
const item = location.state;
|
||||
useEffect(() => {
|
||||
// 获取token
|
||||
let token = sessionStorage.getItem('token')
|
||||
if (!token) {
|
||||
nav('/login')
|
||||
}
|
||||
if (!item) {
|
||||
// 如果没有接收到item,可以导航回列表页或者显示错误信息
|
||||
nav('/list');
|
||||
|
||||
}
|
||||
console.log(item);
|
||||
console.log(GetDownloadUrl( item.id));
|
||||
|
||||
}, [])
|
||||
return (
|
||||
<div className='detailBox'>
|
||||
<div className='formBox'>
|
||||
<div className='useImg'></div>
|
||||
<div className='bookimg'></div>
|
||||
<div className='projName'>
|
||||
{item.projName}
|
||||
</div>
|
||||
<div className='peopleName'>
|
||||
产权所属者:{item.apply.authorName}
|
||||
</div>
|
||||
<div className='timeBox'>
|
||||
<div className='timeImg'>
|
||||
</div>
|
||||
<div>
|
||||
{item.apply.projDevCompleteDate}
|
||||
</div>
|
||||
</div>
|
||||
<div className='downBox'>
|
||||
<div className='done'>
|
||||
<div className='penImge'>
|
||||
<img src={pen} style={{ width: '100%', height: '100%' }} alt="" />
|
||||
</div>
|
||||
<div className='doneName'>申请表</div>
|
||||
</div>
|
||||
<div className='done'>
|
||||
<div className='centerImge'>
|
||||
<img src={center} style={{ width: '100%', height: '100%' }} alt="" />
|
||||
</div>
|
||||
<div className='doneName'>操作手册</div>
|
||||
</div>
|
||||
<div className='done'>
|
||||
<div className='fileImge'>
|
||||
<img src={file} style={{ width: '100%', height: '100%' }} alt="" />
|
||||
</div>
|
||||
<div className='doneName'>源代码</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='downAllBtn'>
|
||||
<div className='doneImg'></div>
|
||||
<div >全部</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className='detailBtn'
|
||||
>
|
||||
使用电脑端打开体验全部功能
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
170
src/views/Detail/detail.less
Normal file
@ -0,0 +1,170 @@
|
||||
.detailBox {
|
||||
width: 375px;
|
||||
height: 100vh;
|
||||
background: url(@/static/images/Use/back.png) no-repeat;
|
||||
// background-color: pink;
|
||||
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.formBox {
|
||||
margin-top: 60px;
|
||||
width: 291px;
|
||||
height: 410px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
position: relative;
|
||||
padding: 0 23px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.useImg {
|
||||
width: 182px;
|
||||
height: 136px;
|
||||
background: url(@/static/images/Use/people.png) no-repeat;
|
||||
// background-color: pink;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: -120px;
|
||||
}
|
||||
|
||||
.bookimg {
|
||||
width: 98px;
|
||||
height: 72px;
|
||||
margin-top: 27px;
|
||||
background: url(@/static/images/Detail/book.png) no-repeat;
|
||||
// background-color: pink;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.projName {
|
||||
font-family: HONORSansCN;
|
||||
width: 100%;
|
||||
// background-color: pink;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #232323;
|
||||
overflow: hidden;
|
||||
// text-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.peopleName {
|
||||
// font-family: HONORSansCN;
|
||||
// font-weight: 500;
|
||||
font-size: 10px;
|
||||
color: #232323;
|
||||
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.timeBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
color: #232323;
|
||||
margin-top: 19px;
|
||||
|
||||
.timeImg {
|
||||
|
||||
width: 10px;
|
||||
height: 9px;
|
||||
|
||||
background: url(@/static/images/Detail/time.png) no-repeat;
|
||||
// background-color: pink;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.downBox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
// background-color: pink;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 60px;
|
||||
|
||||
.done {
|
||||
display: flex;
|
||||
|
||||
.doneName {
|
||||
// background-color: pink;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
// align-items: center;
|
||||
.penImge {
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
margin-right: 4px;
|
||||
|
||||
}
|
||||
|
||||
.centerImge {
|
||||
width: 13px;
|
||||
height: 14px;
|
||||
margin-right: 4px;
|
||||
|
||||
}
|
||||
|
||||
.fileImge {
|
||||
width: 11px;
|
||||
height: 13px;
|
||||
margin-right: 4px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.downAllBtn {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
background: linear-gradient(83deg, #FFBB46 0%, #FF6D05 100%);
|
||||
border-radius: 3px;
|
||||
margin-top: 50px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.doneImg {
|
||||
width: 14px;
|
||||
height: 17px;
|
||||
background: url(@/static/images/Detail/down.png) no-repeat;
|
||||
// background-color: pink;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detailBtn {
|
||||
width: 263px;
|
||||
height: 42px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFBC26;
|
||||
font-family: HONORSansCN;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
298
src/views/Home/Home.jsx
Normal file
@ -0,0 +1,298 @@
|
||||
// import {useState} from 'react'
|
||||
import {
|
||||
Button,
|
||||
// Swiper,
|
||||
// DatePicker
|
||||
} from 'antd-mobile'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
// import Cookies from 'js-cookie';
|
||||
// Cookies.remove('token'); 移除token
|
||||
import './home.less'
|
||||
export default function Home() {
|
||||
// const token = Cookies.get('token');
|
||||
// 从session中获取token
|
||||
const token = sessionStorage.getItem('token')
|
||||
const nav = useNavigate()
|
||||
// 跳转
|
||||
const toUse = () => {
|
||||
|
||||
if (token) {
|
||||
nav('/list')
|
||||
} else {
|
||||
nav('/login')
|
||||
|
||||
}
|
||||
// nav('/list')
|
||||
}
|
||||
// 轮播图假数据
|
||||
// const bannerArray = [
|
||||
// {
|
||||
// id: 1,
|
||||
// name: '嘻嘻',
|
||||
// phone: '12345678963',
|
||||
// num: '50'
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: '嘎嘎嘎嘎',
|
||||
// phone: '25478963254',
|
||||
// num: '200'
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: '嘿嘿123',
|
||||
// phone: '52589632547',
|
||||
// num: '300'
|
||||
// }
|
||||
// ]
|
||||
// 手机号中间四位
|
||||
// const phone = (phone) => {
|
||||
// let phoneNum = phone.split('')
|
||||
// phoneNum.splice(3, 4, '****')
|
||||
// return phoneNum.join('')
|
||||
// }
|
||||
// const items = bannerArray.map((item, index) => (
|
||||
// <Swiper.Item key={index}>
|
||||
// <div
|
||||
// className='swiperItem'
|
||||
// key={item.id}
|
||||
// >
|
||||
// <div className='userInfo'>
|
||||
// <div className='userImg'>
|
||||
// </div>
|
||||
// <div className='userText'>
|
||||
// <div className='userPhone'>
|
||||
// 手机用户{phone(item.phone)}
|
||||
// </div>
|
||||
// <div className='userNum'>
|
||||
// <div>5秒前抢到了</div>
|
||||
// <div className='userPhone' style={{ marginLeft: 5, marginRight: 5 }}> {item.num} </div>
|
||||
// <div> 元优惠券</div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className='rightIcon'>
|
||||
// </div>
|
||||
// </div>
|
||||
// </Swiper.Item>
|
||||
// ))
|
||||
return (
|
||||
<div className='homeBox'>
|
||||
<div className='homeBack'>
|
||||
<div className='homeTitle'>
|
||||
</div>
|
||||
|
||||
{/* <div className='homeBanner'>
|
||||
<Swiper
|
||||
autoplay
|
||||
loop
|
||||
indicator={() => null}>{items}</Swiper>
|
||||
</div> */}
|
||||
|
||||
<div className='couponBox'>
|
||||
<div className='coupon'>
|
||||
<div className='couponCon'>
|
||||
<div className='price'>
|
||||
<div>¥</div>
|
||||
<div className='priceNum'>200</div>
|
||||
<div>元内</div>
|
||||
</div>
|
||||
<div className='couponBotL'>
|
||||
软著包下证
|
||||
</div>
|
||||
</div>
|
||||
<div className='couponCon'>
|
||||
<div className='price'>
|
||||
<div>¥</div>
|
||||
<div className='priceNum'>80</div>
|
||||
<div>元内</div>
|
||||
</div>
|
||||
<div className='couponBotR'>
|
||||
软著系统开发+材料撰写
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='content'>
|
||||
<div className='contentTitle'>
|
||||
<div className='conLeft'>
|
||||
<div className='conNume'>01</div>
|
||||
<div className='conlT'>软著材料撰写</div>
|
||||
</div>
|
||||
<div className='conPrice'>
|
||||
¥80
|
||||
</div>
|
||||
</div>
|
||||
<div className='contentText'>
|
||||
<div className='textBox'>
|
||||
平台提供真实可运行的系统开发与软件申请所需材料撰写,包下证,不下证全额退款
|
||||
</div>
|
||||
<div className='textIcons'>
|
||||
<div className='iconItem'>通过平台搭建可运行软件</div>
|
||||
<div className='iconItem'>平台撰写鉴别材料</div>
|
||||
<div className='iconItem'>包补正材料撰写一直到下证</div>
|
||||
<div className='iconItem'>客服一对一服务</div>
|
||||
<div className='iconItem'>客服一对一服务</div>
|
||||
<div className='iconItem'>客服一对一服务</div>
|
||||
</div>
|
||||
<div className='textBox'>
|
||||
不下证可选择全额退款或在线补正,一次补正退30%,二次补正退款70%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='content'>
|
||||
<div className='contentTitle'>
|
||||
<div className='conLeft'>
|
||||
<div className='conNume'>02</div>
|
||||
<div className='conlT'>全托管</div>
|
||||
</div>
|
||||
<div className='conPrice'>
|
||||
¥180
|
||||
</div>
|
||||
</div>
|
||||
<div className='contentText'>
|
||||
<div className='textBox'>
|
||||
从下单到取证,仅需提供基本信息,我们为您提供一站式管家服务。
|
||||
</div>
|
||||
<div className='textIcons'>
|
||||
<div className='iconItem'>包可运行软件开发与搭建</div>
|
||||
<div className='iconItem'>提供可运行软件安装包</div>
|
||||
<div className='iconItem'>包鉴别材料撰写</div>
|
||||
<div className='iconItem'>提供可运行软件云服务900天</div>
|
||||
<div className='iconItem'>包代办包下证</div>
|
||||
<div className='iconItem'>提供可运行软件演示视频</div>
|
||||
<div className='iconItem'>包开发票</div>
|
||||
<div className='iconItem'>客服一对一服务</div>
|
||||
</div>
|
||||
<div className='textBox'>
|
||||
可提供加急服务
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='contentThree'>
|
||||
<div className='threeTitle'>平台优势</div>
|
||||
<div className='contentBox'>
|
||||
|
||||
<div className='titleLine'>
|
||||
<div className='boxTitle'>
|
||||
系统搭建 操作简单
|
||||
</div>
|
||||
</div>
|
||||
<div className='boxUl'>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>填写系统名称并签署委托开发协议</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>由AI生成系统功能与系统简介</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>填写系统相关所属权信息并生成系统</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>提供灵活的安装包支持公有或私有化部署</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='contentBox conBox'>
|
||||
|
||||
<div className='titleLine'>
|
||||
<div className='boxTitle'>
|
||||
材料撰写 符合国家规范
|
||||
</div>
|
||||
</div>
|
||||
<div className='boxUl'>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>一键生成软著申请所需的所有材料</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>提供源代码审查与查重保证原创性</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>提供多种风格的系统皮肤与框架</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>提供多种风格和行业的用户操作手册模板</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='contentBox conBox'>
|
||||
|
||||
<div className='titleLine'>
|
||||
<div className='boxTitle'>
|
||||
网上申报 省时省力
|
||||
</div>
|
||||
</div>
|
||||
<div className='boxUl'>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>提供国家版权登记平台填报服务</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>提供申报环节动态实时通知服务</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>提供软著材料重新编写与补正服务</div>
|
||||
</div>
|
||||
<div className='boxLi'>
|
||||
<div className='dian'></div>
|
||||
<div>提供申报担保及下证服务</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='introduce'>
|
||||
<div className='introduceTitle'>
|
||||
平台介绍
|
||||
<div className='bookimg'>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className='introduceText'>
|
||||
<div className='intextBox'>
|
||||
山西腾狮科技有限公司旗下的AI秒著引擎平台,致力于提供一站式的“软件系统模型设计、软件在线开发、软件知识产权资料编写及申报”服务。
|
||||
|
||||
</div>
|
||||
<div className='intextBox '>
|
||||
AI秒著引擎平台(https://www.aimzhu.com/)这一创新平台将彻底重塑软件编程与知识产权保护的现状,通过一键式在线智能服务,快速生成可运行系统和软著申请所需的相关材料,极大地简化了软著申请流程。AI秒著引擎平台生成的代码查重率低至令人惊叹。平台采用先进的代码相似度检测技术,确保生成的代码独特性,有效降低查重率。这为广大开发者带来了极大的便利,使得他们在软著申请过程中不再担忧查重问题。
|
||||
|
||||
</div>
|
||||
<div className='intextBox '>
|
||||
软件著作权作为知识产权的重要组成部分,对于企业的创新发展和学生的学术成果保护都具有至关重要的意义。然而,以往的申报过程繁琐、费用高昂,常常让中小企业和学生望而却步。AI秒著引擎平台的出现彻底改变了这一局面。凭借先进的人工智能技术和专业的服务团队,我们致力于为用户提供高效、便捷、零成本的软件著作权申报体验。在此,我们诚挚邀请广大开发者前来体验,共同见证AI科技事业的蓬勃发展!
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div className='box'>
|
||||
|
||||
</div>
|
||||
<div className='tabBar'>
|
||||
<Button block onClick={toUse} className='homeBtn'>
|
||||
免费试用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
446
src/views/Home/home.less
Normal file
@ -0,0 +1,446 @@
|
||||
.homeBox {
|
||||
width: 375px;
|
||||
|
||||
.homeBack {
|
||||
background: url(@/static/images/Home/background.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.homeTitle {
|
||||
width: 344px;
|
||||
height: 68px;
|
||||
margin-top: 75px;
|
||||
background: url(@/static/images/Home/title.png) no-repeat;
|
||||
// background-color: pink;
|
||||
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.homeBanner {
|
||||
width: 311px;
|
||||
height: 70px;
|
||||
margin-top: 237px;
|
||||
// background-color: pink;
|
||||
// background: url(@/static/images/Home/bannerBack.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.swiperItem {
|
||||
width: 311px;
|
||||
height: 70px;
|
||||
background: url(@/static/images/Home/bannerBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// padding: 0 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 29px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.userInfo {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
.userImg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
.userText {
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.userPhone {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
color: #FBB76B;
|
||||
font-family: xianglifang;
|
||||
}
|
||||
|
||||
.userNum {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 12px;
|
||||
color: #CBCBCB;
|
||||
font-family: DengXian;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
// 向右指向的三角
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-left: 8px solid #FFAA00;
|
||||
// background-color: red;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.couponBox {
|
||||
|
||||
width: 323px;
|
||||
height: 98px;
|
||||
background-color: #FFCF7E;
|
||||
margin-top: 14px;
|
||||
margin-top: 230px; //取消banner
|
||||
border-radius: 10px;
|
||||
border: 1px solid white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.coupon {
|
||||
width: 307px;
|
||||
height: 78px;
|
||||
background: url(@/static/images/Home/coupon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
font-family: HONORSansCN;
|
||||
|
||||
.couponCon {
|
||||
flex: 1;
|
||||
// background-color: pink;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
|
||||
.priceNum {
|
||||
font-size: 16px;
|
||||
margin: 0 2px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.couponBotL {
|
||||
width: 85px;
|
||||
height: 19px;
|
||||
background: #5994FF;
|
||||
border-radius: 3px;
|
||||
font-weight: 800;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.couponBotR {
|
||||
width: 123px;
|
||||
height: 19px;
|
||||
background: #FFBA42;
|
||||
border-radius: 3px;
|
||||
font-weight: 800;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 325px;
|
||||
// height: 311px;
|
||||
background-color: white;
|
||||
margin-top: 6px;
|
||||
margin-top: 25px;//取消banner
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.contentTitle {
|
||||
width: 325px;
|
||||
height: 39px;
|
||||
background: #FFFBE8;
|
||||
border-radius: 15px 15px 0 0;
|
||||
padding: 0 22px 0 11px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.conLeft {
|
||||
display: flex;
|
||||
font-family: xianglifang;
|
||||
|
||||
.conNume {
|
||||
width: 45px;
|
||||
height: 18px;
|
||||
background: url(@/static/images/Home/numBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.conlT {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #5994FF;
|
||||
margin-left: 6px;
|
||||
font-family: xianglifang;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.conPrice {
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
color: #5994FF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.contentText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0 32px 0;
|
||||
width: 291px;
|
||||
// background-color: pink;
|
||||
|
||||
.textBox {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #4C4C4C;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.textIcons {
|
||||
margin-top: 2 px;
|
||||
margin-bottom: 20px;
|
||||
// background-color: skyblue;
|
||||
// height: 100px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.iconItem {
|
||||
width: 140px;
|
||||
|
||||
height: 29px;
|
||||
background: #FF8E0E;
|
||||
border-radius: 15px;
|
||||
margin-top: 18px;
|
||||
font-family: JiangChengYuanTi;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .contentTwo {
|
||||
// width: 325px;
|
||||
// height: 355px;
|
||||
// background-color: white;
|
||||
// margin-top: 7px;
|
||||
// border-radius: 15px;
|
||||
// }
|
||||
|
||||
.contentThree {
|
||||
width: 325px;
|
||||
// height: 577px;
|
||||
background-color: white;
|
||||
margin-top: 11px;
|
||||
margin-top: 25px; //取消banner
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 27px 0;
|
||||
|
||||
.threeTitle {
|
||||
font-family: HONORSansCN;
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
color: #1B1B1B;
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
|
||||
.conBox {
|
||||
margin-top: 33px;
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
width: 278px;
|
||||
// background-color: pink;
|
||||
|
||||
|
||||
.titleLine {
|
||||
position: relative;
|
||||
// position: absolute;
|
||||
// bottom:0px;
|
||||
width: 133px;
|
||||
height: 7px;
|
||||
background: linear-gradient(90deg, #FF8E0E 0%, #FFFFFF 100%);
|
||||
|
||||
.boxTitle {
|
||||
width: 278px;
|
||||
position: absolute;
|
||||
font-family: JiangChengYuanTi;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #1B1B1B;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.boxUl {
|
||||
margin-left: 5px;
|
||||
padding: 17px 0 17px 16px;
|
||||
box-sizing: border-box;
|
||||
width: 268px;
|
||||
height: 116px;
|
||||
background: rgba(255, 142, 14, 0.21);
|
||||
border-radius: 0px 17px 0px 17px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top: 9px;
|
||||
|
||||
.boxLi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #1B1B1B;
|
||||
|
||||
// line-height:2px;
|
||||
.dian {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #1B1B1B;
|
||||
border-radius: 50%;
|
||||
margin-right: 3px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.introduce {
|
||||
width: 375px;
|
||||
height: 571px;
|
||||
background-color: white;
|
||||
margin-top: 41px;
|
||||
|
||||
.introduceTitle {
|
||||
width: 375px;
|
||||
height: 86px;
|
||||
font-family: HONORSansCN;
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
color: #1B1B1B;
|
||||
text-align: center;
|
||||
line-height: 86px;
|
||||
position: relative;
|
||||
.bookimg {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 8px;
|
||||
width: 111px;
|
||||
height: 98px;
|
||||
background: url(@/static/images/Home/book.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.introduceText {
|
||||
height: 495px;
|
||||
padding: 27px;
|
||||
box-sizing: border-box;
|
||||
background: #4A4E59;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 21px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 375px;
|
||||
height: 73px;
|
||||
// background-color: pink;
|
||||
}
|
||||
|
||||
.tabBar {
|
||||
width: 375px;
|
||||
height: 73px;
|
||||
background: #FFFFFF;
|
||||
// background-color: pink;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.homeBtn {
|
||||
padding: 0 10px;
|
||||
height: 42px;
|
||||
background: #FFAA00;
|
||||
border-radius: 17px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
font-family: KingnamBobo;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
302
src/views/List/List.jsx
Normal file
@ -0,0 +1,302 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import './list.less'
|
||||
import { Empty } from 'antd-mobile'
|
||||
import { LeftOutline } from 'antd-mobile-icons'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { GetList } from '../../request/api'
|
||||
export default function List() {
|
||||
// tabbar选择
|
||||
const [select, setSelect] = useState('ALL')
|
||||
// 分页
|
||||
const [page, setPage] = useState(1)
|
||||
// 数据总数
|
||||
const [total, setTotal] = useState(0)
|
||||
//展示数据
|
||||
const [projList, setProjList] = useState([])
|
||||
// 列表假数据全部数据
|
||||
// const array = [
|
||||
// {
|
||||
// id: '1',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '2',
|
||||
// name: 'xxxx嘻嘻嘻嘻系统啊是多久啊来得及啊拉萨大家埃里克森大家',
|
||||
// status: 'doing',
|
||||
// people: '嘻嘻嘻嘻下哈还是大喊大叫的时间',
|
||||
// time: ''
|
||||
// },
|
||||
// {
|
||||
// id: '3',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '4',
|
||||
// name: 'xxxx嘻嘻嘻嘻系统啊是多久啊来得及啊拉萨大家埃里克森大家',
|
||||
// status: 'doing',
|
||||
// people: '嘻嘻嘻嘻下哈还是大喊大叫的时间',
|
||||
// time: ''
|
||||
// },
|
||||
// {
|
||||
// id: '5',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '6',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '7',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '8',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '9',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
|
||||
// ]
|
||||
// // 列表假数据已完成数据
|
||||
// const array2 = [
|
||||
// {
|
||||
// id: '1',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '3',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '5',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '6',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '7',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '8',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// {
|
||||
// id: '9',
|
||||
// name: 'xxxx嘻嘻嘻嘻App',
|
||||
// status: 'done',
|
||||
// people: '嘎嘎嘎',
|
||||
// time: '2024-11-25'
|
||||
// },
|
||||
// ]
|
||||
// // 假数据未完成
|
||||
// const array1 = [
|
||||
// {
|
||||
// id: '2',
|
||||
// name: 'xxxx嘻嘻嘻嘻系统啊是多久啊来得及啊拉萨大家埃里克森大家',
|
||||
// status: 'doing',
|
||||
// people: '嘻嘻嘻嘻下哈还是大喊大叫的时间',
|
||||
// time: ''
|
||||
// },
|
||||
// {
|
||||
// id: '4',
|
||||
// name: 'xxxx嘻嘻嘻嘻系统啊是多久啊来得及啊拉萨大家埃里克森大家',
|
||||
// status: 'doing',
|
||||
// people: '嘻嘻嘻嘻下哈还是大喊大叫的时间',
|
||||
// time: ''
|
||||
// },
|
||||
// ]
|
||||
const getList = async (status) => {
|
||||
|
||||
const res = await GetList({
|
||||
page,
|
||||
rows: 10,
|
||||
status: status //ALL全部 PROCESSING 生成中 COMPLETE已完成
|
||||
})
|
||||
console.log(res);
|
||||
setProjList(res.rows)
|
||||
setTotal(res.total)
|
||||
// setProjList([...projList, ...res.rows])
|
||||
}
|
||||
const getPageList = async (status) => {
|
||||
|
||||
const res = await GetList({
|
||||
page: page + 1,
|
||||
rows: 10,
|
||||
generateStatus: status //ALL全部 PROCESSING 生成中 COMPLETE已完成
|
||||
})
|
||||
setPage(page + 1)
|
||||
setProjList([...projList, ...res.rows])
|
||||
}
|
||||
|
||||
const nav = useNavigate()
|
||||
// 点击加载更多
|
||||
// 将新的res.rows push到projList
|
||||
// setProjList([...projList,...res.rows])
|
||||
const toHome = () => {
|
||||
nav('/')
|
||||
}
|
||||
const toUse = () => {
|
||||
nav('/use')
|
||||
}
|
||||
useEffect(() => {
|
||||
getList(select)
|
||||
// getPageList(select)
|
||||
}, [page])
|
||||
useEffect(() => {
|
||||
// 获取token
|
||||
let token = sessionStorage.getItem('token')
|
||||
if (!token) {
|
||||
nav('/login')
|
||||
}
|
||||
}, [])
|
||||
return (
|
||||
<div className="listBox">
|
||||
<div className='listTop'>
|
||||
AI软著引擎
|
||||
<div className='backIocn' onClick={toHome}>
|
||||
<LeftOutline />
|
||||
</div>
|
||||
</div>
|
||||
<div className='listCon'>
|
||||
<div className='listTabbar'>
|
||||
<div className={select == 'ALL' ? 'tabbarBtn tabActive' : 'tabbarBtn'}
|
||||
onClick={() => {
|
||||
setSelect('ALL')
|
||||
getList('ALL')
|
||||
setPage(1)
|
||||
}}
|
||||
>全部
|
||||
<div className='activeLine'></div>
|
||||
</div>
|
||||
<div className={select == 'PROCESSING' ? 'tabbarBtn tabActive' : 'tabbarBtn'}
|
||||
onClick={() => {
|
||||
setSelect('PROCESSING')
|
||||
getList('PROCESSING')
|
||||
setPage(1)
|
||||
}}
|
||||
>生成中
|
||||
<div className='activeLine'></div>
|
||||
</div>
|
||||
<div className={select == 'COMPLETE' ? 'tabbarBtn tabActive' : 'tabbarBtn'}
|
||||
onClick={() => {
|
||||
setSelect('COMPLETE')
|
||||
getList('COMPLETE')
|
||||
setPage(1)
|
||||
}}
|
||||
>已完成
|
||||
<div className='activeLine'></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='listArray'>
|
||||
<div >
|
||||
<div style={{ display: projList.length > 0 ? 'block' : 'none' }}>
|
||||
{
|
||||
projList.map((item) => {
|
||||
return (
|
||||
<div key={item.projId} className='itemBox' style={{ background: item.generate.generateStatus == 'SUCCESS' ? '#E94F4F' : '#F1A73A' }}
|
||||
onClick={() => {
|
||||
if (item.generate.generateStatus == 'SUCCESS') {
|
||||
// 跳转到详情页 并将item传过去
|
||||
nav('/detail', { state: item })
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className='itemCon'>
|
||||
<div className='itemConTop'>
|
||||
<div className='topName'>{item.projName}</div>
|
||||
<div className='topStatus' style={{
|
||||
color: item.generate.generateStatus == 'SUCCESS' ? '#1CB138' : '#FF7200'
|
||||
}}>{item.generate.generateStatus == 'SUCCESS' ? '已完成' : '生成中'}</div>
|
||||
</div>
|
||||
<div className='itemConBot'>
|
||||
<div className='botNameBox'>
|
||||
<div className='itemPeopleImg'></div>
|
||||
<div className='botName'>{item.apply.authorName}</div>
|
||||
</div>
|
||||
<div className='botTimeBox' >
|
||||
|
||||
<div className='itemListImg' style={{ display: item.apply.projDevCompleteDate ? 'block' : 'none' }}></div>
|
||||
<div className='botTime'>{item.apply.projDevCompleteDate}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
<div style={{display:total/10>page?'unset':'none'}}>
|
||||
<div className='getMoreData'
|
||||
onClick={()=>{
|
||||
getPageList(select)
|
||||
}}
|
||||
>加载更多...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: projList.length <= 0 ? 'block' : 'none' }}>
|
||||
<div style={{ width: '100%', height: ' calc(100vh - 250px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Empty description='暂无数据'
|
||||
centered
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className='listBtn' onClick={toUse}>
|
||||
<div>免费</div>
|
||||
<div>使用</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
208
src/views/List/list.less
Normal file
@ -0,0 +1,208 @@
|
||||
.listBox {
|
||||
width: 375px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 0%, #FFA51F 100%);
|
||||
padding: 0 25px 25px 25px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.listTop {
|
||||
height: 59px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
// background-color: pink;
|
||||
position: relative;
|
||||
line-height: 59px;
|
||||
|
||||
.backIocn {
|
||||
text-align: left;
|
||||
// background-color: skyblue;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.listCon {
|
||||
width: 100%;
|
||||
height: calc(100% - 59px);
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
padding: 0 9px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.listTabbar {
|
||||
height: 61px;
|
||||
// background-color: pink;
|
||||
display: flex;
|
||||
|
||||
.tabbarBtn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: 61px;
|
||||
font-size: 13px;
|
||||
|
||||
}
|
||||
|
||||
.tabActive {
|
||||
font-weight: bold;
|
||||
color: #5994FF;
|
||||
position: relative;
|
||||
|
||||
.activeLine {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
background: #5994FF;
|
||||
bottom: 16px;
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listArray {
|
||||
height: calc(100% - 61px);
|
||||
// background-color: skyblue;
|
||||
// padding-bottom: 51px;
|
||||
// box-sizing: border-box;
|
||||
overflow: auto;
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.itemBox {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
background-color: pink;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
|
||||
.itemCon {
|
||||
width: calc(100% - 5px);
|
||||
height: 76px;
|
||||
background-color: #FFFAF8;
|
||||
margin-left: 5px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
padding-left: 16px;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.itemConTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.topName {
|
||||
// background-color: pink;
|
||||
height: 20px;
|
||||
width: 213px;
|
||||
overflow: hidden;
|
||||
// text-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
font-family: HONORSansCN;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.topStatus {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.itemConBot {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.botNameBox {
|
||||
display: flex;
|
||||
// background-color: pink;
|
||||
align-items: center;
|
||||
.itemPeopleImg {
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
background: url(@/static/images/List/people.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.botName {
|
||||
width: 60px;
|
||||
height: 15px;
|
||||
// background-color: pink;
|
||||
margin-left: 8px;
|
||||
overflow: hidden;
|
||||
// text-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.botTimeBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background-color: pink;
|
||||
margin-left: 20px;
|
||||
.itemListImg{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background: url(@/static/images/List/list.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
.botTime{
|
||||
margin-top: 1px;
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.listBtn {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
background: #FFA723;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 51px;
|
||||
right: 43px;
|
||||
|
||||
}
|
||||
}
|
153
src/views/Login/Login.jsx
Normal file
@ -0,0 +1,153 @@
|
||||
import { useState } from 'react'
|
||||
import './login.less'
|
||||
import { Input, Toast, Button } from 'antd-mobile'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
// // 引入接口
|
||||
import { GetCode, DoLogin } from '../../request/api'
|
||||
// import Cookies from 'js-cookie';
|
||||
export default function Login() {
|
||||
// var login = async () => {
|
||||
|
||||
// var res = await DoLogin({ password: pass, username: user })
|
||||
// console.log(res);
|
||||
// if (res.errCode == 0) {
|
||||
|
||||
// localStorage.setItem('token', res.data)
|
||||
// // alert('登陆成功')
|
||||
// // dispatch({
|
||||
// // type:'login',
|
||||
// // })
|
||||
// Toast('登陆成功', 'success')
|
||||
// navigate('/home')
|
||||
|
||||
// } else {
|
||||
// // console.log("失败");
|
||||
// // 抛出错误
|
||||
// throw new Error()
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
const nav = useNavigate()
|
||||
// 手机号
|
||||
const [phoneNum, setPhoneNum] = useState('')
|
||||
// 倒计时
|
||||
const [num, setNum] = useState(60)
|
||||
// 验证码,
|
||||
const [code, setCode] = useState('')
|
||||
// 是否显示发送验证码按钮
|
||||
const [showBtn, setShowBtn] = useState(true)
|
||||
// 获取验证码
|
||||
const getCode = async () => {
|
||||
|
||||
|
||||
// 手机号正则
|
||||
const reg = /^1[3-9]\d{9}$/;
|
||||
|
||||
if (!reg.test(phoneNum)) {
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: '请输入正确的手机号',
|
||||
})
|
||||
|
||||
return
|
||||
} else {
|
||||
var res = await GetCode(phoneNum)
|
||||
console.log(res);
|
||||
|
||||
}
|
||||
// 发送验证码逻辑
|
||||
Toast.show({
|
||||
icon: 'success',
|
||||
content: '验证码已发送',
|
||||
})
|
||||
setShowBtn(false)
|
||||
// 开始倒计时
|
||||
startCountdown();
|
||||
}
|
||||
// 开始倒计时的函数
|
||||
const startCountdown = () => {
|
||||
setShowBtn(false);
|
||||
let countdown = 59;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setNum(countdown);
|
||||
countdown--;
|
||||
|
||||
if (countdown < 0) {
|
||||
clearInterval(interval);
|
||||
setShowBtn(true);
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
// 登录
|
||||
const login = async () => {
|
||||
// 验证code是否为6位数数字正则
|
||||
const reg = /^\d{6}$/;
|
||||
// try {
|
||||
// if (!reg.test(code)) {
|
||||
// Toast.show({
|
||||
// icon: 'fail',
|
||||
// content: '请输入正确的验证码',
|
||||
// })
|
||||
// return
|
||||
// } else {
|
||||
// var res = await DoLogin({ verifyCode: code, phone: phoneNum })
|
||||
// sessionStorage.setItem('token', res.data);
|
||||
// nav('/list')
|
||||
// }
|
||||
// } catch (error) {
|
||||
// Toast.show({
|
||||
// icon: 'fail',
|
||||
// content: error.response.data.msg,
|
||||
// })
|
||||
// }
|
||||
sessionStorage.setItem('token', 'cVJWWXQ1UWpQWTQ1TDZMbEVtTmxiMlJVNkdvTzUwSTNHYzZaK3VTZmF0RTZLVG1LSUFpUzMrSWsvcVRHay9Wb0xCa3g0elJkWGVwSEw2emREeGdEQldpOEt4TDZPVVNQa3FmK09pazUxblA0K2dHWitHUHFnRnVDU21lOGVyLzdyblJpRUpoQlp4Z1l5aXV3aWE1WFlTdkJXeFhCc0JyMlducHlpV1F2L09JdUNRa082dTZ0T0NzbCs4azZGUTZRZUZMWmc3QXJzSG5mMk53SFNJa01FN3pzSUY1WTViQTBVVmp0T1pnQTNBbz0=');
|
||||
// 刷新页面
|
||||
|
||||
nav('/list')
|
||||
|
||||
}
|
||||
return (
|
||||
<div className='login'>
|
||||
<div className='loginTitle'>
|
||||
验证码登录
|
||||
<div className='titleLine'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='loginInput'>
|
||||
<Input className='phoneInput'
|
||||
type="tel"
|
||||
placeholder='请输入手机号'
|
||||
value={phoneNum}
|
||||
onChange={value => {
|
||||
setPhoneNum(value)
|
||||
}}
|
||||
clearable />
|
||||
<div className='numInputBox'>
|
||||
<Input className='numInput'
|
||||
onChange={value => {
|
||||
setCode(value)
|
||||
// setCode(String(value))
|
||||
}}
|
||||
value={code}
|
||||
type="tel"
|
||||
placeholder='请输入验证码'
|
||||
clearable
|
||||
/>
|
||||
<div onClick={getCode} style={{ display: showBtn ? 'unset' : 'none' }} className='numBtn'>获取验证码</div>
|
||||
<div style={{ display: showBtn ? 'none' : 'unset' }} className='numBtn'><span className='numTime'>{num}</span> <span className='unmText'>秒后重试</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Button block className='loginBtn' disabled={phoneNum && code ? false : true} onClick={login}>
|
||||
创建账号并登录
|
||||
</Button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
106
src/views/Login/login.less
Normal file
@ -0,0 +1,106 @@
|
||||
.login {
|
||||
width: 375px;
|
||||
height: 100vh;
|
||||
background: url(@/static/images/Login/background.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 37px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
padding-bottom: 150px;
|
||||
box-sizing: border-box;
|
||||
.loginTitle {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
|
||||
.titleLine {
|
||||
position: absolute;
|
||||
width: 41px;
|
||||
height: 7px;
|
||||
background: #FF5E18;
|
||||
bottom: -12px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loginInput {
|
||||
margin-top: 20px;
|
||||
|
||||
// height: 129px;
|
||||
// background-color: pink;
|
||||
.phoneInput {
|
||||
// height: 129px;
|
||||
// background: #FFF3D9;
|
||||
// border-radius: 65px;
|
||||
// padding-left: 187px;
|
||||
// box-sizing: border-box;
|
||||
// font-size: 48px;
|
||||
padding: 0 26px;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
height: 43px;
|
||||
background: #FFF3D9;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.phoneInput .adm-input-element {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.numInputBox {
|
||||
// background-color: pink;
|
||||
position: relative;
|
||||
|
||||
.numInput {
|
||||
padding-left: 26px;
|
||||
padding-right: 120px;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
height: 43px;
|
||||
background: #FFF3D9;
|
||||
border-radius: 22px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.numInput .adm-input-element {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.numBtn {
|
||||
font-size: 12px;
|
||||
color: #FF5E18;
|
||||
// background-color: skyblue;
|
||||
width: 70px;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
position: absolute;
|
||||
right: 23px;
|
||||
top: 0;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
|
||||
.numTime {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
.unmText {
|
||||
color: #9c9c9c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
width: 300px;
|
||||
height: 43px;
|
||||
background: #FF5E18;
|
||||
border-radius: 22px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
891
src/views/Use/Use.jsx
Normal file
@ -0,0 +1,891 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import './use.less'
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
DatePicker,
|
||||
// Loading,
|
||||
// Mask,
|
||||
// Space,
|
||||
// Popup,
|
||||
Modal,
|
||||
Toast,
|
||||
CheckList,
|
||||
Empty,
|
||||
// Picker,
|
||||
Cascader
|
||||
|
||||
} from 'antd-mobile'
|
||||
import { CreateProj, CreateContact, CreateOwner, GetCsa, GetOwnerList, GetContactList } from '../../request/api'
|
||||
import areaData from 'china-area-data';
|
||||
|
||||
const provinceData = Object.keys(areaData['86']).map(provinceCode => ({
|
||||
label: areaData['86'][provinceCode],
|
||||
value: provinceCode,
|
||||
children: areaData[provinceCode] ? Object.keys(areaData[provinceCode]).map(cityCode => ({
|
||||
label: areaData[provinceCode][cityCode],
|
||||
value: cityCode,
|
||||
})) : [],
|
||||
}));
|
||||
|
||||
|
||||
export default function Use() {
|
||||
const [form] = Form.useForm();
|
||||
const [cascaberShow, setCascaberShow] = useState(false)
|
||||
const onFinish = (values) => {
|
||||
createNewOwner(values.name, values.idCardNo, values.provinceCity);
|
||||
setCreateOwner(false);
|
||||
};
|
||||
// const [cityvisible, setcityvisible] = useState(false);
|
||||
// const [selectedProvinceCity, setSelectedProvinceCity] = useState([]);
|
||||
|
||||
// const onPickerConfirm = (values) => {
|
||||
// console.log(values);
|
||||
|
||||
// const provinceCode = values[0];
|
||||
// const cityCode = values[1];
|
||||
|
||||
// const province = areaData['86'][provinceCode];
|
||||
|
||||
|
||||
// const city = areaData[provinceCode][cityCode];
|
||||
|
||||
// setSelectedProvinceCity([province, city]);
|
||||
// setcityvisible(false);
|
||||
// };
|
||||
// const [cityvisible, setCityvisible] = useState(false);
|
||||
// const [selectedProvinceCity, setSelectedProvinceCity] = useState([]);
|
||||
// const [provinceData, setProvinceData] = useState([]);
|
||||
|
||||
// // 初始化省份数据
|
||||
// useEffect(() => {
|
||||
// const provinces = Object.keys(areaData['86']).map(provinceCode => ({
|
||||
// label: areaData['86'][provinceCode],
|
||||
// value: provinceCode,
|
||||
// }));
|
||||
|
||||
|
||||
// setProvinceData([provinces, []]);
|
||||
// }, []);
|
||||
|
||||
// // 根据选择的省份更新市的数据
|
||||
// useEffect(() => {
|
||||
// if (selectedProvinceCity.length > 0) {
|
||||
// const provinceCode = selectedProvinceCity[0];
|
||||
// const cities = Object.keys(areaData[provinceCode] || {}).map(cityCode => ({
|
||||
// label: areaData[provinceCode][cityCode],
|
||||
// value: cityCode,
|
||||
// }));
|
||||
|
||||
// setProvinceData([provinceData[0], cities]);
|
||||
// }
|
||||
// }, [selectedProvinceCity]);
|
||||
|
||||
// const onPickerConfirm = (values) => {
|
||||
// const provinceCode = values[0];
|
||||
// const cityCode = values[1];
|
||||
|
||||
// const province = areaData['86'][provinceCode];
|
||||
// const city = areaData[provinceCode][cityCode];
|
||||
|
||||
// setSelectedProvinceCity([provinceCode, cityCode]);
|
||||
// setCityvisible(false);
|
||||
// };
|
||||
|
||||
|
||||
// const [form] = Form.useForm();
|
||||
const nav = useNavigate()
|
||||
const [name, setName] = useState('') //系统全称
|
||||
const [nameToast, setNameTost] = useState(false) //系统全称提示
|
||||
//所属者数据
|
||||
const [ownerPage, setOwnerPage] = useState(1) //所属者数据页码
|
||||
const [ownerList, setOwnerList] = useState([]) //所属者列表数据
|
||||
const [ownerTotal, setOwnerTotal] = useState(0) //所属者列表数据总条数
|
||||
const [belongPeopleModal, setBelongPeopleModal] = useState(false) //知识产权所属者弹窗是否显示
|
||||
const [createOwner, setCreateOwner] = useState(false) //创建知识产权所属者弹窗是否显示
|
||||
//选择所属者数据
|
||||
const [selectOwner, setSelectOwner] = useState('') //选中的所属者名字
|
||||
const [selectOwnerId, setSelectOwnerId] = useState('') //选中的所属者id
|
||||
const [selectCity, setSelectCity] = useState('')//选中得所属者省市
|
||||
const [selectCard, setSelectCard] = useState('')//选中得所属者证件号
|
||||
|
||||
|
||||
//最终生成项目时所属者数据
|
||||
const [belongPeople, setBelongPeople] = useState('') //知识产权所属者姓名
|
||||
const [idCardNo, setIdCardNo] = useState('') //身份证号
|
||||
const [provinceCity, setProvinceCity] = useState('') //[省,市]
|
||||
const [belongPeopleToast, setBelongPeopleToast] = useState(false) //知识产权所属者提示
|
||||
const [authorId, setAuthorId] = useState('') //知识产权所属者id
|
||||
|
||||
//联系人数据
|
||||
const [contactPage, setContactPage] = useState(1) //联系人数据页码
|
||||
const [contactList, setContactList] = useState([]) //联系人列表数据
|
||||
const [contactTotal, setContactTotal] = useState(0) //联系人列表数据总条数
|
||||
const [contactModal, setContactModal] = useState(false) //联系人弹窗是否显示
|
||||
const [createContactModal, setCreateContactModal] = useState(false) //创建联系人弹窗是否显示
|
||||
|
||||
//选择得联系人数据
|
||||
const [selectContactCsa, setSelectContactCsa] = useState('') //选中得联系人客服编号
|
||||
const [selectContactId, setSelectContactId] = useState('') //选中的联系人id
|
||||
const [selectContact, setSelectContact] = useState('') //选中的联系人名字
|
||||
const [selectContactPhone, setSelectContactPhone] = useState('') //选中的联系人手机号
|
||||
//最终生成项目时联系人数据
|
||||
const [applyContactId, setApplyContactId] = useState('') //联系人id
|
||||
// const [createContact, setCreateContact] = useState(false) //创建联系人弹窗是否显示
|
||||
const [contactName, setContactName] = useState('') //联系人姓名
|
||||
const [contactPhone, setContactPhone] = useState('') //手机号
|
||||
const [contactNameToast, setContactNameToast] = useState(false) //联系人姓名提示
|
||||
const [applyContactCsaNo, setApplyContactCsaNo] = useState('') //联系人客服编号
|
||||
|
||||
const [visible, setVisible] = useState(false); //时间弹窗是否显示
|
||||
const [time, setTime] = useState('') //开发完成时间
|
||||
const [timeToast, setTimeToast] = useState(false) //开发完成时间提示
|
||||
|
||||
|
||||
|
||||
|
||||
// const [loading, setLoading] = useState(false);//是否有加载中
|
||||
// 选择时间按钮
|
||||
const handleDateChange = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
setTime(`${year}年${month}月${day}日`);
|
||||
setVisible(false);
|
||||
setTimeToast(false)
|
||||
};
|
||||
|
||||
// 点击生成
|
||||
const generate = async () => {
|
||||
if (name === '') {
|
||||
setNameTost(true)
|
||||
} else {
|
||||
setNameTost(false)
|
||||
}
|
||||
if (belongPeople === '') {
|
||||
setBelongPeopleToast(true)
|
||||
|
||||
} else {
|
||||
setBelongPeopleToast(false)
|
||||
}
|
||||
if (contactName === '') {
|
||||
setContactNameToast(true)
|
||||
|
||||
} else {
|
||||
setContactNameToast(false)
|
||||
}
|
||||
if (time === '') {
|
||||
setTimeToast(true)
|
||||
|
||||
} else {
|
||||
setTimeToast(false)
|
||||
}
|
||||
if (name && belongPeople && contactName && time) {
|
||||
// setLoading(true)
|
||||
try {
|
||||
await CreateProj({
|
||||
applyContactCsaNo: applyContactCsaNo,
|
||||
applyContactId: applyContactId,
|
||||
applyContactName: contactName,
|
||||
applyContactPhone: contactPhone,
|
||||
authorCrcAccount: 0,
|
||||
authorId: authorId,
|
||||
authorIdCard: idCardNo,
|
||||
authorIdCardType: 'ID_CARD',
|
||||
authorName: belongPeople,
|
||||
authorProvinceCity: provinceCity,
|
||||
// authorProvinceCity: '辽宁省,沈阳市',
|
||||
authorType: 'PERSONAL',
|
||||
projDevCompleteDate: time,
|
||||
projName: name,
|
||||
projVersion: 'v1.0',
|
||||
projChargeType: 'FREE'
|
||||
})
|
||||
// setLoading(false)
|
||||
nav('/list')
|
||||
|
||||
} catch (error) {
|
||||
// 处理失败的情况
|
||||
console.error('软著创建失败:', error);
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: error.response.data.msg,
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
// 获取所属者列表
|
||||
const getOwnerList = async (page) => {
|
||||
let res = await GetOwnerList({
|
||||
page: page,
|
||||
rows: 10,
|
||||
})
|
||||
// console.log(res);
|
||||
setOwnerList(res.rows)
|
||||
setOwnerTotal(res.total)
|
||||
|
||||
}
|
||||
// 获取下一页的所属者数据
|
||||
const getPageOwnerList = async (page) => {
|
||||
let res = await GetOwnerList({
|
||||
page: page,
|
||||
rows: 10,
|
||||
})
|
||||
// console.log(res);
|
||||
console.log(res.rows);
|
||||
// 将新的数据添加到旧的数据中
|
||||
setOwnerList([...ownerList, ...res.rows])
|
||||
// setOwnerTotal(res.total)
|
||||
|
||||
}
|
||||
// 新建所属者
|
||||
const createNewOwner = async (name, cardNo, city) => {
|
||||
try {
|
||||
let res = await CreateOwner({
|
||||
name: name,
|
||||
idCardNo: cardNo,
|
||||
idCardType: 'ID_CARD',
|
||||
isCrcAccount: 0,
|
||||
provinceCity: city,
|
||||
type: 'PERSONAL'
|
||||
})
|
||||
// console.log(res);
|
||||
if (res.data) {
|
||||
Toast.show({
|
||||
icon: 'success',
|
||||
content: '创建成功',
|
||||
})
|
||||
getOwnerList(1)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
// 处理失败的情况
|
||||
console.error('软著所属者失败:', error);
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: error.response.data.msg,
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
// 获取联系人列表
|
||||
const getContactList = async (page) => {
|
||||
let res = await GetContactList({
|
||||
page: page,
|
||||
rows: 10,
|
||||
})
|
||||
// console.log(res);
|
||||
setContactList(res.rows)
|
||||
setContactTotal(res.total)
|
||||
}
|
||||
// 获取下一页的联系人数据
|
||||
const getPageContactList = async (page) => {
|
||||
let res = await GetContactList({
|
||||
page: page,
|
||||
rows: 10,
|
||||
})
|
||||
|
||||
console.log(res.rows);
|
||||
// 将新的数据添加到旧的数据中
|
||||
setContactList([...contactList, ...res.rows])
|
||||
}
|
||||
|
||||
// 新建联系人
|
||||
const createNewContact = async (name, phone) => {
|
||||
// 获取随机客服
|
||||
try {
|
||||
let csaRes = await GetCsa()
|
||||
console.log(csaRes.csaNo);
|
||||
if (csaRes.csaNo) {
|
||||
try {
|
||||
let res = await CreateContact({
|
||||
name: name,
|
||||
phone: phone,
|
||||
csaNo: csaRes.csaNo
|
||||
})
|
||||
// console.log(res);
|
||||
if (res.data) {
|
||||
Toast.show({
|
||||
icon: 'success',
|
||||
content: '创建成功',
|
||||
})
|
||||
getContactList(1)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
// 处理失败的情况
|
||||
console.error('创建软著联系人失败:', error);
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: error.response.data.msg,
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
// 处理失败的情况
|
||||
console.error('软著联系人失败:', error);
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: error.response.data.msg,
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// try {
|
||||
// let res = await CreateContact({
|
||||
// name: name,
|
||||
// phone: phone,
|
||||
// csaNo: csaNo
|
||||
// })
|
||||
// // console.log(res);
|
||||
// if (res.data) {
|
||||
// Toast.show({
|
||||
// icon:'success',
|
||||
// content: '创建成功',
|
||||
// })
|
||||
// getContactList(1)
|
||||
// }
|
||||
|
||||
// } catch (error) {
|
||||
// // 处理失败的情况
|
||||
// console.error('软著联系人失败:', error);
|
||||
// Toast.show({
|
||||
// icon: 'fail',
|
||||
// content: error.response.data.msg,
|
||||
// })
|
||||
|
||||
// }
|
||||
|
||||
}
|
||||
useEffect(() => {
|
||||
// 获取token
|
||||
let token = sessionStorage.getItem('token')
|
||||
if (!token) {
|
||||
nav('/login')
|
||||
}
|
||||
|
||||
|
||||
|
||||
}, [])
|
||||
return (
|
||||
<div className='useBox'>
|
||||
<div className='formBox'>
|
||||
<div className='useImg'>
|
||||
</div>
|
||||
<div className='formTitle'>
|
||||
免费使用
|
||||
</div>
|
||||
<div className='formItem'>
|
||||
<div className='itemName'>系统全称</div>
|
||||
<Input className='formInput'
|
||||
clearable
|
||||
value={name}
|
||||
onChange={(value) => {
|
||||
setName(value)
|
||||
if (value !== '') {
|
||||
setNameTost(false)
|
||||
}
|
||||
}}
|
||||
placeholder='请输入所创建软著的名称'></Input>
|
||||
<div className='itemToast' style={{ visibility: nameToast ? 'unset' : 'hidden' }}>
|
||||
请输入所创建软著的名称
|
||||
</div>
|
||||
</div>
|
||||
<div className='formItem'>
|
||||
<div className='itemName'>知识产权所属者</div>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Input className='formInput'
|
||||
clearable
|
||||
value={belongPeople}
|
||||
onChange={(value) => {
|
||||
// setBelongPeople(value)
|
||||
if (value !== '') {
|
||||
setBelongPeopleToast(false)
|
||||
}
|
||||
}}
|
||||
placeholder='请选择知识产权所属者'></Input>
|
||||
<div className='datePick' onClick={() => {
|
||||
setBelongPeopleModal(true)
|
||||
getOwnerList(ownerPage)
|
||||
|
||||
}}></div>
|
||||
</div>
|
||||
<div className='itemToast' style={{ visibility: belongPeopleToast ? 'unset' : 'hidden' }}>
|
||||
请选择知识产权所属者
|
||||
</div>
|
||||
</div>
|
||||
<div className='formItem'>
|
||||
<div className='itemName'>知识产权联系人</div>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Input className='formInput'
|
||||
clearable
|
||||
value={contactName}
|
||||
onChange={(value) => {
|
||||
// setContactName(value)
|
||||
if (value !== '') {
|
||||
setContactNameToast(false)
|
||||
}
|
||||
}}
|
||||
placeholder='请选择知识产权联系人'></Input>
|
||||
<div className='datePick' onClick={() => {
|
||||
setContactModal(true)
|
||||
getContactList(contactPage)
|
||||
}}></div>
|
||||
</div>
|
||||
<div className='itemToast' style={{ visibility: contactNameToast ? 'unset' : 'hidden' }}>
|
||||
请选择知识产权联系人
|
||||
</div>
|
||||
</div>
|
||||
<div className='formItem'>
|
||||
<div className='itemName'>开发完成时间</div>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<Input className='formInput' value={time}
|
||||
placeholder='请选择开发完成时间' >
|
||||
</Input>
|
||||
<div className='datePick' onClick={() => {
|
||||
setVisible(true)
|
||||
}}>
|
||||
<div className='timeImg'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='itemToast' style={{ visibility: timeToast ? 'unset' : 'hidden' }}>
|
||||
请选择开发完成时间
|
||||
</div>
|
||||
</div>
|
||||
<DatePicker
|
||||
visible={visible}
|
||||
onClose={() => setVisible(false)}
|
||||
onConfirm={handleDateChange}
|
||||
title="选择日期"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<Button className='useBtn'
|
||||
// disabled={loading}
|
||||
onClick={
|
||||
() => {
|
||||
generate()
|
||||
}
|
||||
|
||||
}>
|
||||
AI生成
|
||||
</Button>
|
||||
{/* <Mask visible={loading} color="rgba(0, 0, 0, 0.5)">
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
|
||||
<Space direction="vertical" align="center">
|
||||
<Loading color="white" />
|
||||
<div style={{ color: 'white', marginTop: 16 }}>
|
||||
正在生成...
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
</Mask> */}
|
||||
{/* 所属者列表弹窗 */}
|
||||
<Modal
|
||||
destroyOnClose
|
||||
closeOnMaskClick
|
||||
visible={belongPeopleModal}
|
||||
content={
|
||||
(
|
||||
<div style={{ paddingBottom: 30, paddingTop: 30 }}>
|
||||
<div className='ModalTitle'>
|
||||
<div className='titleL'>选择所属者</div>
|
||||
<Button className='titleR' block
|
||||
style={{ background: '#FFBA27', color: 'white' }}
|
||||
onClick={() => {
|
||||
setCreateOwner(true)
|
||||
form.setFieldsValue({
|
||||
provinceCity: ''
|
||||
});
|
||||
}}
|
||||
>新建所属者</Button>
|
||||
</div>
|
||||
<div style={{ display: ownerList.length > 0 ? 'unset' : 'none' }}>
|
||||
<CheckList
|
||||
onChange={(value) => {
|
||||
console.log(value);
|
||||
if (value.length > 0) {
|
||||
// console.log('选了');
|
||||
setSelectOwner(value[0].name)
|
||||
setSelectOwnerId(value[0].projOwnerId)
|
||||
setSelectCity(value[0].provinceCity)
|
||||
setSelectCard(value[0].idCardNo)
|
||||
} else {
|
||||
// console.log('未选');
|
||||
setSelectOwner('')
|
||||
setSelectOwnerId('')
|
||||
setSelectCity('')
|
||||
setSelectCard('')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>
|
||||
{ownerList.map((item) => (
|
||||
<CheckList.Item
|
||||
key={item.projOwnerId} // 确保每个选项都有一个唯一的 key
|
||||
value={item}
|
||||
disabled={item.disabled}
|
||||
readOnly={item.readOnly}
|
||||
>
|
||||
{item.name}
|
||||
</CheckList.Item>
|
||||
))}
|
||||
</CheckList>
|
||||
<div style={{ display: ownerTotal / 10 > ownerPage ? 'unset' : 'none' }}>
|
||||
<div className='getMoreData'
|
||||
onClick={() => {
|
||||
setOwnerPage(ownerPage + 1)
|
||||
getPageOwnerList(ownerPage + 1)
|
||||
}}
|
||||
>点击加载更多....</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: ownerList.length <= 0 ? 'unset' : 'none' }}>
|
||||
<div className='modalNoDate'>
|
||||
<Empty description='暂无数据'
|
||||
centered
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', position: 'fixed', bottom: 10, width: '92%', background: 'white' }}>
|
||||
<Button className='selectBtn' block style={{ marginRight: 10 }} onClick={() => {
|
||||
setSelectOwner('')
|
||||
setSelectOwnerId('')
|
||||
setSelectCity('')
|
||||
setSelectCard('')
|
||||
setBelongPeopleModal(false)
|
||||
setOwnerPage(1)
|
||||
}}>取消</Button>
|
||||
<Button className='selectBtn' block
|
||||
style={{ background: '#FFBA27', color: 'white' }}
|
||||
onClick={() => {
|
||||
if (selectOwner) {
|
||||
setBelongPeople(selectOwner)
|
||||
setAuthorId(selectOwnerId)
|
||||
setIdCardNo(selectCard)
|
||||
setProvinceCity(selectCity)
|
||||
setBelongPeopleModal(false)
|
||||
setSelectOwner('')
|
||||
setSelectOwnerId('')
|
||||
setSelectCity('')
|
||||
setSelectCard('')
|
||||
setOwnerPage(1)
|
||||
} else {
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: '请选择所属者',
|
||||
})
|
||||
}
|
||||
|
||||
// console.log('id', selectOwnerId, 'name', selectOwner);
|
||||
|
||||
}}
|
||||
>确定</Button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', position: 'fixed', bottom: 0, height: 10, width: '92%', background: 'white' }}></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
closeOnAction
|
||||
onClose={() => {
|
||||
setBelongPeopleModal(false)
|
||||
}}
|
||||
|
||||
/>
|
||||
{/* 新建所属者弹窗 */}
|
||||
<Modal
|
||||
destroyOnClose
|
||||
closeOnMaskClick
|
||||
visible={createOwner}
|
||||
content={
|
||||
(
|
||||
<div className='modalBox'>
|
||||
<div className='createModalTitle'>
|
||||
新建所属者
|
||||
</div>
|
||||
|
||||
<Form
|
||||
form={form}
|
||||
layout='horizontal'
|
||||
onFinish={onFinish}
|
||||
footer={
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button block className='selectBtn' style={{ marginRight: 10 }} onClick={() => setCreateOwner(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button block type='submit' className='selectBtn' style={{ background: '#FFBA27', color: 'white' }}>
|
||||
确定
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
name='name'
|
||||
label='姓名'
|
||||
rules={[{ required: true, message: '姓名不能为空' }]}
|
||||
>
|
||||
<Input placeholder='请输入姓名' clearable />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name='idCardNo'
|
||||
label='身份证号'
|
||||
rules={[{ required: true, message: '身份证号不能为空' }]}
|
||||
>
|
||||
<Input placeholder='请输入身份证号' type='tel' clearable />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name='provinceCity'
|
||||
label='省市'
|
||||
rules={[{ required: true, message: '省市不能为空' }]}
|
||||
>
|
||||
<Input placeholder='请选择省市' onClick={() => {
|
||||
setCascaberShow(true)
|
||||
}} clearable />
|
||||
|
||||
</Form.Item>
|
||||
<Cascader
|
||||
// destroyOnClose = {true}
|
||||
options={provinceData}
|
||||
visible={cascaberShow}
|
||||
placeholder='请选择省市'
|
||||
fieldNames={{ label: 'label', value: 'value', children: 'children' }}
|
||||
// 取消
|
||||
onCancel={() => {
|
||||
setCascaberShow(false)
|
||||
}}
|
||||
onConfirm={(value) => {
|
||||
console.log(value);
|
||||
if(value.length == 0){
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: '请选择省市',
|
||||
})
|
||||
return
|
||||
}
|
||||
if(value.length < 2){
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: '请选择市',
|
||||
})
|
||||
return
|
||||
}
|
||||
setCascaberShow(false)
|
||||
|
||||
const provinceCode = value[0];
|
||||
const cityCode = value[1];
|
||||
console.log(areaData['86'][provinceCode]);
|
||||
console.log(areaData[provinceCode][cityCode]);
|
||||
|
||||
const province = areaData['86'][provinceCode];
|
||||
const city = areaData[provinceCode][cityCode];
|
||||
const val = `${province},${city}`;
|
||||
//让form表单的provinceCity值变为 省份,城市
|
||||
form.setFieldsValue({
|
||||
provinceCity: val
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
closeOnAction
|
||||
onClose={() => {
|
||||
setCreateOwner(false)
|
||||
}}
|
||||
|
||||
/>
|
||||
|
||||
{/*联系人列表弹窗 */}
|
||||
<Modal
|
||||
destroyOnClose
|
||||
closeOnMaskClick
|
||||
visible={contactModal}
|
||||
content={
|
||||
(
|
||||
<div style={{ paddingBottom: 30, paddingTop: 30 }}>
|
||||
<div className='ModalTitle'>
|
||||
<div className='titleL'>选择联系人</div>
|
||||
<Button className='titleR' block
|
||||
style={{ background: '#FFBA27', color: 'white' }}
|
||||
onClick={() => {
|
||||
setCreateContactModal(true)
|
||||
}}
|
||||
>新建联系人</Button>
|
||||
</div>
|
||||
<div style={{ display: contactList.length > 0 ? 'unset' : 'none' }}>
|
||||
<CheckList
|
||||
onChange={(value) => {
|
||||
console.log(value);
|
||||
if (value.length > 0) {
|
||||
// console.log('选了');
|
||||
// console.log(value[0].csaNo);
|
||||
setSelectContactCsa(value[0].csaNo)
|
||||
setSelectContactId(value[0].projContactId)
|
||||
setSelectContact(value[0].name)
|
||||
setSelectContactPhone(value[0].phone)
|
||||
|
||||
} else {
|
||||
console.log('未选');
|
||||
setSelectContactCsa('')
|
||||
setSelectContactId('')
|
||||
setSelectContact('')
|
||||
setSelectContactPhone('')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>
|
||||
{contactList.map((item) => (
|
||||
<CheckList.Item
|
||||
key={item.projContactId} // 确保每个选项都有一个唯一的 key
|
||||
value={item}
|
||||
disabled={item.disabled}
|
||||
readOnly={item.readOnly}
|
||||
>
|
||||
{item.name}
|
||||
</CheckList.Item>
|
||||
))}
|
||||
</CheckList>
|
||||
<div style={{ display: contactTotal / 10 > contactPage ? 'unset' : 'none' }}>
|
||||
<div className='getMoreData'
|
||||
onClick={() => {
|
||||
setContactPage(contactPage + 1)
|
||||
getPageContactList(contactPage + 1)
|
||||
}}
|
||||
>点击加载更多....</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: contactList.length <= 0 ? 'unset' : 'none' }}>
|
||||
<div className='modalNoDate'>
|
||||
<Empty description='暂无数据'
|
||||
centered
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', position: 'fixed', bottom: 10, width: '92%', background: 'white' }}>
|
||||
<Button className='selectBtn' block style={{ marginRight: 10 }} onClick={() => {
|
||||
setSelectContactCsa('')
|
||||
setSelectContactId('')
|
||||
setSelectContact('')
|
||||
setSelectContactPhone('')
|
||||
setContactModal(false)
|
||||
setContactPage(1)
|
||||
}}>取消</Button>
|
||||
<Button className='selectBtn' block
|
||||
style={{ background: '#FFBA27', color: 'white' }}
|
||||
onClick={() => {
|
||||
if (selectContact) {
|
||||
setApplyContactId(selectContactId)
|
||||
setApplyContactCsaNo(selectContactCsa)
|
||||
setContactName(selectContact)
|
||||
setContactPhone(selectContactPhone)
|
||||
setContactModal(false)
|
||||
setSelectContactCsa('')
|
||||
setSelectContactId('')
|
||||
setSelectContact('')
|
||||
setSelectContactPhone('')
|
||||
setContactPage(1)
|
||||
} else {
|
||||
Toast.show({
|
||||
icon: 'fail',
|
||||
content: '请选择联系人',
|
||||
})
|
||||
}
|
||||
|
||||
// console.log('id', selectOwnerId, 'name', selectOwner);
|
||||
|
||||
}}
|
||||
>确定</Button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', position: 'fixed', bottom: 0, height: 10, width: '92%', background: 'white' }}></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
closeOnAction
|
||||
onClose={() => {
|
||||
setBelongPeopleModal(false)
|
||||
}}
|
||||
|
||||
/>
|
||||
{/* 创建联系人弹窗 */}
|
||||
<Modal
|
||||
destroyOnClose
|
||||
closeOnMaskClick
|
||||
visible={createContactModal}
|
||||
content={
|
||||
(
|
||||
<div className='modalBox'>
|
||||
<div className='createModalTitle'>
|
||||
新建联系人
|
||||
</div>
|
||||
<Form
|
||||
layout='horizontal'
|
||||
// bordered={false}
|
||||
onFinish={(values) => {
|
||||
// setContactName(values.name)
|
||||
// setContactPhone(values.phone)
|
||||
createNewContact(values.name, values.phone)
|
||||
setCreateContactModal(false)
|
||||
}}
|
||||
footer={
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button block style={{ marginRight: 10 }}
|
||||
className='selectBtn'
|
||||
onClick={() => {
|
||||
setCreateContactModal(false)
|
||||
|
||||
}}>取消</Button>
|
||||
<Button block type='submit'
|
||||
className='selectBtn'
|
||||
style={{ background: '#FFBA27', color: 'white' }}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
}
|
||||
>
|
||||
|
||||
<Form.Item
|
||||
name='name'
|
||||
label='姓名'
|
||||
rules={[{ required: true, message: '姓名不能为空' }]}
|
||||
>
|
||||
<Input placeholder='请输入姓名' clearable />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name='phone'
|
||||
label='手机号'
|
||||
rules={[{ required: true, message: '手机号不能为空' }]}
|
||||
>
|
||||
<Input placeholder='请输入手机号' type='tel' clearable />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
closeOnAction
|
||||
onClose={() => {
|
||||
setBelongPeopleModal(false)
|
||||
}}
|
||||
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
185
src/views/Use/use.less
Normal file
@ -0,0 +1,185 @@
|
||||
.useBox {
|
||||
width: 375px;
|
||||
height: 100vh;
|
||||
background: url(@/static/images/Use/back.png) no-repeat;
|
||||
// background-color: pink;
|
||||
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
.formBox {
|
||||
margin-top: 60px;
|
||||
width: 291px;
|
||||
height: 410px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.adm-input-element {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.formTitle {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FF8E0E;
|
||||
font-family: HONORSansCN;
|
||||
margin-top: 31px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.formItem {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.itemName {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
color: #292929;
|
||||
font-family: HONORSansCN;
|
||||
margin-bottom: 2px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.formInput {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 3px;
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
font-size: 11px;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
}
|
||||
|
||||
.datePick {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
// background-color: pink;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
.timeImg {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
background: url(@/static/images/Use/date.png) no-repeat;
|
||||
right: 13px;
|
||||
top: 12px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.itemToast {
|
||||
font-size: 10px;
|
||||
color: rgb(233, 110, 110);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.useImg {
|
||||
width: 182px;
|
||||
height: 136px;
|
||||
background: url(@/static/images/Use/people.png) no-repeat;
|
||||
// background-color: pink;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: -120px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.useBtn {
|
||||
font-family: HONORSansCN;
|
||||
width: 244px;
|
||||
height: 42px;
|
||||
background: #5994FF;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.modalBox {
|
||||
padding-top: 10px;
|
||||
|
||||
.adm-list-item-content-prefix {
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
|
||||
}
|
||||
|
||||
.adm-input-element {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.createModalTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ModalTitle {
|
||||
display: flex;
|
||||
// height: 40px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 92%;
|
||||
z-index: 99;
|
||||
|
||||
.titleL {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.titleR {
|
||||
width: 100px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.modalNoDate {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
// background-color: pink;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.getMoreData{
|
||||
// background-color: pink;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #5994FF;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.adm-list-item-content-main{
|
||||
font-size: 12px;
|
||||
}
|
||||
.selectBtn{
|
||||
font-size: 12px;
|
||||
}
|
133
src/views/css/detail.css
Normal file
@ -0,0 +1,133 @@
|
||||
.detailBox {
|
||||
width: 375px;
|
||||
height: 100vh;
|
||||
background: url(@/static/images/Use/back.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.detailBox .formBox {
|
||||
margin-top: 60px;
|
||||
width: 291px;
|
||||
height: 410px;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
padding: 0 23px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.detailBox .formBox .useImg {
|
||||
width: 182px;
|
||||
height: 136px;
|
||||
background: url(@/static/images/Use/people.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: -120px;
|
||||
}
|
||||
.detailBox .formBox .bookimg {
|
||||
width: 98px;
|
||||
height: 72px;
|
||||
margin-top: 27px;
|
||||
background: url(@/static/images/Detail/book.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.detailBox .formBox .projName {
|
||||
font-family: HONORSansCN;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #232323;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.detailBox .formBox .peopleName {
|
||||
font-size: 10px;
|
||||
color: #232323;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.detailBox .formBox .timeBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
color: #232323;
|
||||
margin-top: 19px;
|
||||
}
|
||||
.detailBox .formBox .timeBox .timeImg {
|
||||
width: 10px;
|
||||
height: 9px;
|
||||
background: url(@/static/images/Detail/time.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.detailBox .formBox .downBox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-evenly;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.detailBox .formBox .downBox .done {
|
||||
display: flex;
|
||||
}
|
||||
.detailBox .formBox .downBox .done .doneName {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.detailBox .formBox .downBox .done .penImge {
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.detailBox .formBox .downBox .done .centerImge {
|
||||
width: 13px;
|
||||
height: 14px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.detailBox .formBox .downBox .done .fileImge {
|
||||
width: 11px;
|
||||
height: 13px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.detailBox .formBox .downAllBtn {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
background: linear-gradient(83deg, #FFBB46 0%, #FF6D05 100%);
|
||||
border-radius: 3px;
|
||||
margin-top: 50px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.detailBox .formBox .downAllBtn .doneImg {
|
||||
width: 14px;
|
||||
height: 17px;
|
||||
background: url(@/static/images/Detail/down.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.detailBox .detailBtn {
|
||||
width: 263px;
|
||||
height: 42px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFBC26;
|
||||
font-family: HONORSansCN;
|
||||
margin-top: 20px;
|
||||
}
|
||||
/*# sourceMappingURL=./detail.css.map */
|
1
src/views/css/detail.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../Detail/detail.less"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,uDAAA;EAGA,0BAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;;AAVJ,UAYI;EACI,gBAAA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;EACA,sBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;;AAtBR,UAYI,SAYI;EACI,YAAA;EACA,aAAA;EACA,yDAAA;EAEA,0BAAA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;;AAhCZ,UAYI,SAuBI;EACI,WAAA;EACA,YAAA;EACA,gBAAA;EACA,0DAAA;EAEA,0BAAA;;AAzCZ,UAYI,SAgCI;EACI,wBAAA;EACA,WAAA;EAEA,iBAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;EAEA,mBAAA;EAEA,uBAAA;EACA,kBAAA;EACA,gBAAA;;AAzDZ,UAYI,SAgDI;EAGI,eAAA;EACA,cAAA;EAEA,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,uBAAA;EACA,kBAAA;EACA,gBAAA;;AAvEZ,UAYI,SA8DI;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;;AA/EZ,UAYI,SA8DI,SAOI;EAEI,WAAA;EACA,WAAA;EAEA,0DAAA;EAEA,0BAAA;EACA,iBAAA;;AAzFhB,UAYI,SAiFI;EACI,aAAA;EACA,WAAA;EAEA,6BAAA;EACA,gBAAA;;AAlGZ,UAYI,SAiFI,SAOI;EACI,aAAA;;AArGhB,UAYI,SAiFI,SAOI,MAGI;EAEI,eAAA;;AAzGpB,UAYI,SAiFI,SAOI,MASI;EACI,WAAA;EACA,YAAA;EACA,iBAAA;;AAhHpB,UAYI,SAiFI,SAOI,MAgBI;EACI,WAAA;EACA,YAAA;EACA,iBAAA;;AAvHpB,UAYI,SAiFI,SAOI,MAuBI;EACI,WAAA;EACA,YAAA;EACA,iBAAA;;AA9HpB,UAYI,SAwHI;EACI,WAAA;EACA,YAAA;EACA,YAAY,gDAAZ;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;EACA,eAAA;EACA,cAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;;AA/IZ,UAYI,SAwHI,YAaI;EACI,WAAA;EACA,YAAA;EACA,0DAAA;EAEA,0BAAA;EACA,kBAAA;;AAvJhB,UA8JI;EACI,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA;EACA,gBAAA"}
|
353
src/views/css/home.css
Normal file
@ -0,0 +1,353 @@
|
||||
.homeBox {
|
||||
width: 375px;
|
||||
}
|
||||
.homeBox .homeBack {
|
||||
background: url(@/static/images/Home/background.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.homeBox .homeTitle {
|
||||
width: 344px;
|
||||
height: 68px;
|
||||
margin-top: 75px;
|
||||
background: url(@/static/images/Home/title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.homeBox .homeBanner {
|
||||
width: 311px;
|
||||
height: 70px;
|
||||
margin-top: 237px;
|
||||
}
|
||||
.homeBox .swiperItem {
|
||||
width: 311px;
|
||||
height: 70px;
|
||||
background: url(@/static/images/Home/bannerBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 29px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.homeBox .swiperItem .userInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.homeBox .swiperItem .userInfo .userImg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: skyblue;
|
||||
}
|
||||
.homeBox .swiperItem .userInfo .userText {
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.homeBox .swiperItem .userInfo .userText .userPhone {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
color: #FBB76B;
|
||||
font-family: xianglifang;
|
||||
}
|
||||
.homeBox .swiperItem .userInfo .userText .userNum {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 12px;
|
||||
color: #CBCBCB;
|
||||
font-family: DengXian;
|
||||
}
|
||||
.homeBox .swiperItem .rightIcon {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-left: 8px solid #FFAA00;
|
||||
}
|
||||
.homeBox .couponBox {
|
||||
width: 323px;
|
||||
height: 98px;
|
||||
background-color: #FFCF7E;
|
||||
margin-top: 14px;
|
||||
margin-top: 230px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.homeBox .couponBox .coupon {
|
||||
width: 307px;
|
||||
height: 78px;
|
||||
background: url(@/static/images/Home/coupon.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
font-family: HONORSansCN;
|
||||
}
|
||||
.homeBox .couponBox .coupon .couponCon {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.homeBox .couponBox .coupon .couponCon .price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
.homeBox .couponBox .coupon .couponCon .price .priceNum {
|
||||
font-size: 16px;
|
||||
margin: 0 2px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.homeBox .couponBox .coupon .couponCon .couponBotL {
|
||||
width: 85px;
|
||||
height: 19px;
|
||||
background: #5994FF;
|
||||
border-radius: 3px;
|
||||
font-weight: 800;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.homeBox .couponBox .coupon .couponCon .couponBotR {
|
||||
width: 123px;
|
||||
height: 19px;
|
||||
background: #FFBA42;
|
||||
border-radius: 3px;
|
||||
font-weight: 800;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.homeBox .content {
|
||||
width: 325px;
|
||||
background-color: white;
|
||||
margin-top: 6px;
|
||||
margin-top: 25px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.homeBox .content .contentTitle {
|
||||
width: 325px;
|
||||
height: 39px;
|
||||
background: #FFFBE8;
|
||||
border-radius: 15px 15px 0 0;
|
||||
padding: 0 22px 0 11px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.homeBox .content .contentTitle .conLeft {
|
||||
display: flex;
|
||||
font-family: xianglifang;
|
||||
}
|
||||
.homeBox .content .contentTitle .conLeft .conNume {
|
||||
width: 45px;
|
||||
height: 18px;
|
||||
background: url(@/static/images/Home/numBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.homeBox .content .contentTitle .conLeft .conlT {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #5994FF;
|
||||
margin-left: 6px;
|
||||
font-family: xianglifang;
|
||||
}
|
||||
.homeBox .content .contentTitle .conPrice {
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
color: #5994FF;
|
||||
}
|
||||
.homeBox .content .contentText {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0 32px 0;
|
||||
width: 291px;
|
||||
}
|
||||
.homeBox .content .contentText .textBox {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #4C4C4C;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.homeBox .content .contentText .textIcons {
|
||||
margin-top: 2 px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.homeBox .content .contentText .textIcons .iconItem {
|
||||
width: 140px;
|
||||
height: 29px;
|
||||
background: #FF8E0E;
|
||||
border-radius: 15px;
|
||||
margin-top: 18px;
|
||||
font-family: JiangChengYuanTi;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
}
|
||||
.homeBox .contentThree {
|
||||
width: 325px;
|
||||
background-color: white;
|
||||
margin-top: 11px;
|
||||
margin-top: 25px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 27px 0;
|
||||
}
|
||||
.homeBox .contentThree .threeTitle {
|
||||
font-family: HONORSansCN;
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
color: #1B1B1B;
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
.homeBox .contentThree .conBox {
|
||||
margin-top: 33px;
|
||||
}
|
||||
.homeBox .contentThree .contentBox {
|
||||
width: 278px;
|
||||
}
|
||||
.homeBox .contentThree .contentBox .titleLine {
|
||||
position: relative;
|
||||
width: 133px;
|
||||
height: 7px;
|
||||
background: linear-gradient(90deg, #FF8E0E 0%, #FFFFFF 100%);
|
||||
}
|
||||
.homeBox .contentThree .contentBox .titleLine .boxTitle {
|
||||
width: 278px;
|
||||
font-family: JiangChengYuanTi;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #1B1B1B;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
}
|
||||
.homeBox .contentThree .contentBox .boxUl {
|
||||
margin-left: 5px;
|
||||
padding: 17px 0 17px 16px;
|
||||
box-sizing: border-box;
|
||||
width: 268px;
|
||||
height: 116px;
|
||||
background: rgba(255, 142, 14, 0.21);
|
||||
border-radius: 0px 17px 0px 17px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.homeBox .contentThree .contentBox .boxUl .boxLi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #1B1B1B;
|
||||
}
|
||||
.homeBox .contentThree .contentBox .boxUl .boxLi .dian {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #1B1B1B;
|
||||
border-radius: 50%;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.homeBox .introduce {
|
||||
width: 375px;
|
||||
height: 571px;
|
||||
background-color: white;
|
||||
margin-top: 41px;
|
||||
}
|
||||
.homeBox .introduce .introduceTitle {
|
||||
width: 375px;
|
||||
height: 86px;
|
||||
font-family: HONORSansCN;
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
color: #1B1B1B;
|
||||
text-align: center;
|
||||
line-height: 86px;
|
||||
position: relative;
|
||||
}
|
||||
.homeBox .introduce .introduceTitle .bookimg {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 8px;
|
||||
width: 111px;
|
||||
height: 98px;
|
||||
background: url(@/static/images/Home/book.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.homeBox .introduce .introduceText {
|
||||
height: 495px;
|
||||
padding: 27px;
|
||||
box-sizing: border-box;
|
||||
background: #4A4E59;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 21px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.homeBox .box {
|
||||
width: 375px;
|
||||
height: 73px;
|
||||
}
|
||||
.homeBox .tabBar {
|
||||
width: 375px;
|
||||
height: 73px;
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.homeBox .tabBar .homeBtn {
|
||||
padding: 0 10px;
|
||||
height: 42px;
|
||||
background: #FFAA00;
|
||||
border-radius: 17px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
font-family: KingnamBobo;
|
||||
}
|
||||
/*# sourceMappingURL=./home.css.map */
|
1
src/views/css/home.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../Home/home.less"],"names":[],"mappings":"AAAA;EACI,YAAA;;AADJ,QAGI;EACI,8DAAA;EACA,0BAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;;AARR,QAWI;EACI,YAAA;EACA,YAAA;EACA,gBAAA;EACA,yDAAA;EAGA,0BAAA;;AAlBR,QAqBI;EACI,YAAA;EACA,YAAA;EACA,iBAAA;;AAxBR,QA8BI;EACI,YAAA;EACA,YAAA;EACA,8DAAA;EACA,0BAAA;EAEA,kBAAA;EACA,mBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;;AAzCR,QA8BI,YAaI;EAEI,aAAA;EACA,mBAAA;;AA9CZ,QA8BI,YAaI,UAOI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yBAAA;;AAtDhB,QA8BI,YAaI,UAcI;EACI,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;;AA7DhB,QA8BI,YAaI,UAcI,UAMI;EACI,gBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA;;AAnEpB,QA8BI,YAaI,UAcI,UAaI;EACI,aAAA;EACA,qBAAA;EACA,eAAA;EACA,cAAA;EACA,qBAAA;;AA3EpB,QA8BI,YAqDI;EAEI,QAAA;EACA,SAAA;EACA,iCAAA;EACA,oCAAA;EACA,8BAAA;;AAzFZ,QAiGI;EAEI,YAAA;EACA,YAAA;EACA,yBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;;AA5GR,QAiGI,WAaI;EACI,YAAA;EACA,YAAA;EACA,0DAAA;EACA,0BAAA;EACA,aAAA;EACA,wBAAA;;AApHZ,QAiGI,WAaI,QAQI;EACI,OAAA;EAEA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;;AA5HhB,QAiGI,WAaI,QAQI,WAQI;EACI,aAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;;AAnIpB,QAiGI,WAaI,QAQI,WAQI,OAOI;EACI,eAAA;EACA,aAAA;EACA,iBAAA;;AAxIxB,QAiGI,WAaI,QAQI,WAsBI;EACI,WAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;;AAtJpB,QAiGI,WAaI,QAQI,WAmCI;EACI,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;;AAnKpB,QA0KI;EACI,YAAA;EAEA,uBAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;;AAnLR,QA0KI,SAWI;EACI,YAAA;EACA,YAAA;EACA,mBAAA;EACA,4BAAA;EACA,sBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;;AA9LZ,QA0KI,SAWI,cAWI;EACI,aAAA;EACA,wBAAA;;AAlMhB,QA0KI,SAWI,cAWI,SAII;EACI,WAAA;EACA,YAAA;EACA,2DAAA;EACA,0BAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;;AA9MpB,QA0KI,SAWI,cAWI,SAiBI;EACI,gBAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,wBAAA;;AAtNpB,QA0KI,SAWI,cAsCI;EACI,4BAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;;AA/NhB,QA0KI,SA0DI;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,sBAAA;EACA,YAAA;;AAzOZ,QA0KI,SA0DI,aAQI;EACI,WAAA;EACA,4BAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,gBAAA;;AAnPhB,QA0KI,SA0DI,aAkBI;EACI,gBAAA;EACA,mBAAA;EAGA,WAAA;EACA,aAAA;EACA,eAAA;EACA,8BAAA;;AA9PhB,QA0KI,SA0DI,aAkBI,WAUI;EACI,YAAA;EAEA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;EACA,6BAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,iBAAA;;AA3QpB,QAyRI;EACI,YAAA;EAEA,uBAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,eAAA;;AAnSR,QAyRI,cAYI;EACI,wBAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;EACA,mBAAA;;AA1SZ,QAyRI,cAoBI;EACI,gBAAA;;AA9SZ,QAyRI,cAwBI;EACI,YAAA;;AAlTZ,QAyRI,cAwBI,YAKI;EACI,kBAAA;EAGA,YAAA;EACA,WAAA;EACA,YAAY,gDAAZ;;AA5ThB,QAyRI,cAwBI,YAKI,WAQI;EACI,YAAA;EAEA,6BAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,YAAA;;AAtUpB,QAyRI,cAwBI,YA2BI;EACI,gBAAA;EACA,yBAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,oCAAA;EACA,gCAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;EACA,eAAA;;AAvVhB,QAyRI,cAwBI,YA2BI,OAaI;EACI,aAAA;EACA,mBAAA;EACA,4BAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;;AA/VpB,QAyRI,cAwBI,YA2BI,OAaI,OASI;EACI,UAAA;EACA,WAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;;AAvWxB,QA+WI;EACI,YAAA;EACA,aAAA;EACA,uBAAA;EACA,gBAAA;;AAnXR,QA+WI,WAMI;EACI,YAAA;EACA,YAAA;EACA,wBAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,iBAAA;EACA,kBAAA;;AA9XZ,QA+WI,WAMI,gBAUI;EACI,kBAAA;EACA,QAAA;EACA,QAAA;EACA,YAAA;EACA,YAAA;EACA,wDAAA;EACA,0BAAA;;AAtYhB,QA+WI,WA6BI;EACI,aAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,+BAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,8BAAA;;AAxZZ,QA8ZI;EACI,YAAA;EACA,YAAA;;AAhaR,QAoaI;EACI,YAAA;EACA,YAAA;EACA,mBAAA;EAEA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,eAAA;EACA,sBAAA;;AA9aR,QAoaI,QAYI;EACI,eAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA"}
|
158
src/views/css/list.css
Normal file
@ -0,0 +1,158 @@
|
||||
.listBox {
|
||||
width: 375px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 0%, #FFA51F 100%);
|
||||
padding: 0 25px 25px 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.listBox .listTop {
|
||||
height: 59px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
line-height: 59px;
|
||||
}
|
||||
.listBox .listTop .backIocn {
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 30px;
|
||||
}
|
||||
.listBox .listCon {
|
||||
width: 100%;
|
||||
height: calc(100% - 59px);
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
padding: 0 9px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.listBox .listCon .listTabbar {
|
||||
height: 61px;
|
||||
display: flex;
|
||||
}
|
||||
.listBox .listCon .listTabbar .tabbarBtn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: 61px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.listBox .listCon .listTabbar .tabActive {
|
||||
font-weight: bold;
|
||||
color: #5994FF;
|
||||
position: relative;
|
||||
}
|
||||
.listBox .listCon .listTabbar .tabActive .activeLine {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
background: #5994FF;
|
||||
bottom: 16px;
|
||||
left: calc(50% - 6px);
|
||||
}
|
||||
.listBox .listCon .listArray {
|
||||
height: calc(100% - 61px);
|
||||
overflow: auto;
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
background-color: pink;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon {
|
||||
width: calc(100% - 5px);
|
||||
height: 76px;
|
||||
background-color: #FFFAF8;
|
||||
margin-left: 5px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
padding-left: 16px;
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConTop .topName {
|
||||
height: 20px;
|
||||
width: 213px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-family: HONORSansCN;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConTop .topStatus {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConBot {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConBot .botNameBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConBot .botNameBox .itemPeopleImg {
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
background: url(@/static/images/List/people.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConBot .botNameBox .botName {
|
||||
width: 60px;
|
||||
height: 15px;
|
||||
margin-left: 8px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConBot .botTimeBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConBot .botTimeBox .itemListImg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background: url(@/static/images/List/list.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.listBox .listCon .listArray .itemBox .itemCon .itemConBot .botTimeBox .botTime {
|
||||
margin-top: 1px;
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
.listBox .listBtn {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
background: #FFA723;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 51px;
|
||||
right: 43px;
|
||||
}
|
||||
/*# sourceMappingURL=./list.css.map */
|
1
src/views/css/list.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../List/list.less"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,YAAY,2DAAZ;EACA,yBAAA;EACA,sBAAA;;AALJ,QAOI;EACI,YAAA;EACA,iBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EAEA,kBAAA;EACA,iBAAA;;AAfR,QAOI,SAUI;EACI,gBAAA;EAEA,kBAAA;EACA,OAAA;EACA,SAAA;EACA,WAAA;;AAvBZ,QA4BI;EACI,WAAA;EACA,QAAQ,iBAAR;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,sBAAA;;AAlCR,QA4BI,SAQI;EACI,YAAA;EAEA,aAAA;;AAvCZ,QA4BI,SAQI,YAKI;EACI,OAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;;AA7ChB,QA4BI,SAQI,YAaI;EACI,iBAAA;EACA,cAAA;EACA,kBAAA;;AApDhB,QA4BI,SAQI,YAaI,WAKI;EACI,kBAAA;EACA,WAAA;EACA,WAAA;EACA,mBAAA;EACA,YAAA;EACA,MAAM,eAAN;;AA5DpB,QA4BI,SAqCI;EACI,QAAQ,iBAAR;EAIA,cAAA;EACA,qBAAA;EACA,sBAAA;;AAxEZ,QA4BI,SAqCI,WASI;EACI,WAAA;EACA,YAAA;EACA,sBAAA;EACA,kBAAA;EACA,0BAAA;;AA/EhB,QA4BI,SAqCI,WASI,SAOI;EACI,OAAO,gBAAP;EACA,YAAA;EACA,yBAAA;EACA,gBAAA;EACA,0BAAA;EACA,kBAAA;EACA,mBAAA;EACA,sBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;;AA5FpB,QA4BI,SAqCI,WASI,SAOI,SAYI;EACI,aAAA;EACA,mBAAA;EACA,8BAAA;;AAhGxB,QA4BI,SAqCI,WASI,SAOI,SAYI,YAKI;EAEI,YAAA;EACA,YAAA;EACA,gBAAA;EAEA,mBAAA;EAEA,uBAAA;EACA,wBAAA;EACA,gBAAA;EACA,eAAA;;AA7G5B,QA4BI,SAqCI,WASI,SAOI,SAYI,YAmBI;EACI,gBAAA;EACA,eAAA;;AAlH5B,QA4BI,SAqCI,WASI,SAOI,SAqCI;EACI,aAAA;EACA,gBAAA;;AAxHxB,QA4BI,SAqCI,WASI,SAOI,SAqCI,YAGI;EACI,aAAA;EAEA,mBAAA;;AA5H5B,QA4BI,SAqCI,WASI,SAOI,SAqCI,YAGI,YAII;EACI,WAAA;EACA,YAAA;EACA,0DAAA;EACA,0BAAA;;AAjIhC,QA4BI,SAqCI,WASI,SAOI,SAqCI,YAGI,YAWI;EACI,WAAA;EACA,YAAA;EAEA,gBAAA;EACA,gBAAA;EAEA,mBAAA;EACA,uBAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;;AA/IhC,QA4BI,SAqCI,WASI,SAOI,SAqCI,YA6BI;EACI,aAAA;EACA,mBAAA;EAEA,iBAAA;;AAvJ5B,QA4BI,SAqCI,WASI,SAOI,SAqCI,YA6BI,YAKI;EACI,WAAA;EACA,YAAA;EACA,wDAAA;EACA,0BAAA;;AA5JhC,QA4BI,SAqCI,WASI,SAOI,SAqCI,YA6BI,YAYI;EACI,eAAA;EACA,gBAAA;EACA,eAAA;EACA,cAAA;;AAnKhC,QA8LI;EACI,WAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA"}
|
84
src/views/css/login.css
Normal file
@ -0,0 +1,84 @@
|
||||
.login {
|
||||
width: 375px;
|
||||
height: 100vh;
|
||||
background: url(@/static/images/Login/background.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 37px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
padding-bottom: 150px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login .loginTitle {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
}
|
||||
.login .loginTitle .titleLine {
|
||||
position: absolute;
|
||||
width: 41px;
|
||||
height: 7px;
|
||||
background: #FF5E18;
|
||||
bottom: -12px;
|
||||
left: 0;
|
||||
}
|
||||
.login .loginInput {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.login .loginInput .phoneInput {
|
||||
padding: 0 26px;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
height: 43px;
|
||||
background: #FFF3D9;
|
||||
border-radius: 22px;
|
||||
}
|
||||
.login .loginInput .phoneInput .adm-input-element {
|
||||
font-size: 16px;
|
||||
}
|
||||
.login .loginInput .numInputBox {
|
||||
position: relative;
|
||||
}
|
||||
.login .loginInput .numInputBox .numInput {
|
||||
padding-left: 26px;
|
||||
padding-right: 120px;
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
height: 43px;
|
||||
background: #FFF3D9;
|
||||
border-radius: 22px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.login .loginInput .numInputBox .numInput .adm-input-element {
|
||||
font-size: 16px;
|
||||
}
|
||||
.login .loginInput .numInputBox .numBtn {
|
||||
font-size: 12px;
|
||||
color: #FF5E18;
|
||||
width: 70px;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
position: absolute;
|
||||
right: 23px;
|
||||
top: 0;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.login .loginInput .numInputBox .numBtn .numTime {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
.login .loginInput .numInputBox .numBtn .unmText {
|
||||
color: #9c9c9c;
|
||||
}
|
||||
.login .loginBtn {
|
||||
width: 300px;
|
||||
height: 43px;
|
||||
background: #FF5E18;
|
||||
border-radius: 22px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/*# sourceMappingURL=./login.css.map */
|
1
src/views/css/login.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../Login/login.less"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,+DAAA;EACA,0BAAA;EACA,eAAA;EAEA,aAAA;EACA,sBAAA;EACA,6BAAA;EACA,qBAAA;EACA,sBAAA;;AAXJ,MAYI;EACI,gBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;;AAhBR,MAYI,YAMI;EACI,kBAAA;EACA,WAAA;EACA,WAAA;EACA,mBAAA;EACA,aAAA;EACA,OAAA;;AAxBZ,MA4BI;EACI,gBAAA;;AA7BR,MA4BI,YAKI;EAOI,eAAA;EACA,sBAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;;AA7CZ,MA4BI,YAoBI,YAAY;EACR,eAAA;;AAjDZ,MA4BI,YAwBI;EAEI,kBAAA;;AAtDZ,MA4BI,YAwBI,aAII;EACI,kBAAA;EACA,oBAAA;EACA,sBAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;;AAhEhB,MA4BI,YAwBI,aAeI,UAAU;EACN,eAAA;;AApEhB,MA4BI,YAwBI,aAmBI;EACI,eAAA;EACA,cAAA;EAEA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA,WAAA;EACA,MAAA;EACA,eAAA;EACA,kBAAA;;AAlFhB,MA4BI,YAwBI,aAmBI,QAaI;EACI,cAAA;;AArFpB,MA4BI,YAwBI,aAmBI,QAiBI;EACI,cAAA;;AAzFpB,MAgGI;EACI,YAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;EACA,eAAA;EACA,cAAA"}
|
145
src/views/css/use.css
Normal file
@ -0,0 +1,145 @@
|
||||
.useBox {
|
||||
width: 375px;
|
||||
height: 100vh;
|
||||
background: url(@/static/images/Use/back.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.useBox .formBox {
|
||||
margin-top: 60px;
|
||||
width: 291px;
|
||||
height: 410px;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.useBox .formBox .adm-input-element {
|
||||
font-size: 12px;
|
||||
}
|
||||
.useBox .formBox .formTitle {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FF8E0E;
|
||||
font-family: HONORSansCN;
|
||||
margin-top: 31px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.useBox .formBox .formItem {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.useBox .formBox .formItem .itemName {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
color: #292929;
|
||||
font-family: HONORSansCN;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.useBox .formBox .formItem .formInput {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 3px;
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
font-size: 11px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.useBox .formBox .formItem .datePick {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.useBox .formBox .formItem .datePick .timeImg {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
background: url(@/static/images/Use/date.png) no-repeat;
|
||||
right: 13px;
|
||||
top: 12px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.useBox .formBox .formItem .itemToast {
|
||||
font-size: 10px;
|
||||
color: #e96e6e;
|
||||
}
|
||||
.useBox .formBox .useImg {
|
||||
width: 182px;
|
||||
height: 136px;
|
||||
background: url(@/static/images/Use/people.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: -120px;
|
||||
}
|
||||
.useBox .useBtn {
|
||||
font-family: HONORSansCN;
|
||||
width: 244px;
|
||||
height: 42px;
|
||||
background: #5994FF;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.modalBox {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.modalBox .adm-list-item-content-prefix {
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.modalBox .adm-input-element {
|
||||
font-size: 12px;
|
||||
}
|
||||
.createModalTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ModalTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
background-color: #ffffff;
|
||||
width: 92%;
|
||||
z-index: 99;
|
||||
}
|
||||
.ModalTitle .titleL {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ModalTitle .titleR {
|
||||
width: 100px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.modalNoDate {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.getMoreData {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #5994FF;
|
||||
text-align: center;
|
||||
}
|
||||
.adm-list-item-content-main {
|
||||
font-size: 12px;
|
||||
}
|
||||
.selectBtn {
|
||||
font-size: 12px;
|
||||
}
|
||||
/*# sourceMappingURL=./use.css.map */
|
1
src/views/css/use.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../Use/use.less"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,uDAAA;EAGA,0BAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;;AAVJ,OAaI;EACI,gBAAA;EACA,YAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;EACA,sBAAA;;AApBR,OAaI,SASI;EACI,eAAA;;AAvBZ,OAaI,SAaI;EACI,iBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA;EACA,gBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;;AAlCZ,OAaI,SAwBI;EACI,mBAAA;;AAtCZ,OAaI,SAwBI,UAGI;EACI,iBAAA;EACA,eAAA;EACA,cAAA;EACA,wBAAA;EACA,kBAAA;;AA7ChB,OAaI,SAwBI,UAcI;EACI,WAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,eAAA;EACA,sBAAA;EACA,eAAA;EACA,YAAA;EACA,aAAA;;AA5DhB,OAaI,SAwBI,UA2BI;EACI,WAAA;EACA,YAAA;EAEA,kBAAA;EACA,MAAA;;AArEhB,OAaI,SAwBI,UA2BI,UAOI;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uDAAA;EACA,WAAA;EACA,SAAA;EACA,0BAAA;;AA9EpB,OAaI,SAwBI,UA6CI;EACI,eAAA;EACA,cAAA;;AApFhB,OAaI,SA6EI;EACI,YAAA;EACA,aAAA;EACA,yDAAA;EAEA,0BAAA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;;AAlGZ,OA2GI;EACI,wBAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;;AAIR;EACI,iBAAA;;AADJ,SAGI;EACI,eAAA;EACA,eAAA;;AALR,SASI;EACI,eAAA;;AAKR;EACI,eAAA;EACA,gBAAA;EACA,mBAAA;;AAGJ;EACI,aAAA;EAEA,mBAAA;EACA,8BAAA;EACA,eAAA;EACA,SAAA;EACA,yBAAA;EACA,UAAA;EACA,WAAA;;AATJ,WAWI;EACI,eAAA;EACA,gBAAA;;AAbR,WAgBI;EACI,YAAA;EACA,eAAA;;AAIR;EACI,WAAA;EACA,aAAA;EAEA,aAAA;EACA,mBAAA;EACA,uBAAA;;AAEJ;EAEI,aAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;;AAGJ;EACI,eAAA;;AAEJ;EACI,eAAA"}
|
37
vite.config.js
Normal file
@ -0,0 +1,37 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import postcssPxToViewport from 'postcss-px-to-viewport';
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0', // 允许外部网络访问
|
||||
port: 3000, // 更改此处的端口号
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': '/src', // 配置@指向src目录
|
||||
},
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
postcssPxToViewport({
|
||||
viewportWidth: 375, // 视口宽度,根据设计图的大小
|
||||
viewportHeight: 1000, // 视口高度,根据设计图的大小
|
||||
unitPrecision: 6,// 保留小数点
|
||||
viewportUnit: 'vw', // 单位
|
||||
selectorBlackList: [], // 排除的类
|
||||
minPixelValue: 1, // px的最小单位
|
||||
mediaQuery: false, // 排除媒体查询
|
||||
landscapeUnit: 'vw', // 横屏单位
|
||||
fontViewportUnit: 'vw', // 字体属性单位
|
||||
// exclude: /(\/|\\)(node_modules)(\/|\\)/, // 排除 node_modules 目录下的文件
|
||||
}),
|
||||
// 其他 PostCSS 插件配置
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
})
|