Skip to content

Z
zhikuManage
提交 338e50ae authored 作者: yyh's avatar yyh
浏览文件
操作

Initial commit

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 1448 行增加 和 0 行删除
.env.alpha 0 → 100644
浏览文件 @ 338e50ae
NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'
outputDir = 'alpha'
\ No newline at end of file
.env.build 0 → 100644
浏览文件 @ 338e50ae
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
outputDir = 'dist'
\ No newline at end of file
.eslintignore 0 → 100644
浏览文件 @ 338e50ae
*.js,
*.vue
node_modules
dist/
test
build/
src/
\ No newline at end of file
.eslintrc.js 0 → 100644
浏览文件 @ 338e50ae
module.exports = {
"env": {
"browser": true,
"es6": true,
"commonjs": true
},
"extends": [
"eslint:recommended",
"plugin:vue/essential"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
// 要求或禁止使用分号而不是 ASI（这个才是控制行尾部分号的，）
'semi': [0, 'always'],
// 强制在 function的左括号之前使用一致的空格
'space-before-function-paren': [1, 'always'],
'lines-around-comment': 1,
// 操作符前后要加空格
'space-infix-ops': 1,
// 关键字前后必须有空格
'keyword-spacing': 2,
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
// 'prettier/prettier': 'error'
}
};
\ No newline at end of file
.gitignore 0 → 100644
浏览文件 @ 338e50ae
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
babel.config.js 0 → 100644
浏览文件 @ 338e50ae
module.exports = {
presets: [
'@vue/app'
]
}
package-lock.json 0 → 100644
浏览文件 @ 338e50ae
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
浏览文件 @ 338e50ae
{
"name": "huitangManage",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"alpha": "vue-cli-service build --mode alpha",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"build": "^0.1.4",
"core-js": "^2.6.5",
"element-ui": "^2.12.0",
"gulp": "^4.0.2",
"jquery": "^3.4.1",
"lib-flexible": "^0.3.2",
"postcss-px2rem": "^0.3.0",
"postcss-px2rem-exclude": "0.0.6",
"px2rem-loader": "^0.1.9",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vue-seamless-scroll": "^1.1.23",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"babel-eslint": "^10.0.1",
"bootstrap": "^4.3.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"image-webpack-loader": "^6.0.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"lib-flexible": "^0.3.2",
"postcss-plugin-px2rem": "^0.8.1",
"postcss-px-to-viewport": "^1.1.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
public/index.html 0 → 100644
浏览文件 @ 338e50ae
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>会堂后台</title>
<style>
body {
padding-right: 0 !important;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but ty-kx doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
src/App.vue 0 → 100644
浏览文件 @ 338e50ae
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app",
components: {},
data() {
return {
};
},
methods: {
},
};
</script>
<style lang="less" scoped>
</style>
src/assets/css/common.css 0 → 100644
浏览文件 @ 338e50ae
@charset "utf-8";
@font-face {
font-family: 'baseFont';
src: url('../font/baseFont.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AlibabaPuHuiTi-Light';
src: url('../font/Alibaba-PuHuiTi-Light.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AlibabaPuHuiTi-Regular';
src: url('../font/Alibaba-PuHuiTi-Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AlibabaPuHuiTi-Medium';
src: url('../font/ALIBABA-PUHUITI-MEDIUM.TTF');
font-weight: normal;
font-style: normal;
}
input,
select,
textarea,
button{
outline:none;
}
ul,li { list-style:none}
#app {
width: 100%;
height: 100%;
background-image: url("../img/appBg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html,body{height: 100%;}
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {margin:0; padding:0;}
body{
/* font-size:1px; */
font-family: "Alibaba-PuHuiTi-Regular" !important;
/* text-align: center; */
}
\ No newline at end of file
src/axios/axios.js 0 → 100644
浏览文件 @ 338e50ae
/**
* Created by tengteng on 18/7/17.
*/
// axios
import axios from 'axios';
import baseUrl from './index'
import router from '../router';
axios.defaults.withCredentials = true;
/**
* 添加请求拦截器
*/
axios.interceptors.request.use(function (config) {
// //判断token是否存在
// if (config.url !== baseUrl + '/user/login' && localStorage.getItem('token')) {
// config.headers.token = localStorage.getItem('token'); //将token设置成请求头
// }
// 预处理请求信息（config
return config;
}, function (error) {
// 预处理请求有异常（error）时抛出错误
return Promise.reject(error);
});
/**
* 添加响应拦截器
*/
axios.interceptors.response.use(function (response) {
// 预处理响应数据（response）
return response;
}, function (error) {
if (error.response !== undefined) {
if (error.response.status === 403) { // 错误处理
router.push({name: 'login', params: {data: 'axios'}});
// window.location.reload();
}
}
return Promise.reject(checkStatus(error));
});
/**
* 状态码校验
* @param response
* @return {*}
*/
function checkStatus (response) {
// 有响应时校验状态
if (response) {
// -1000 自己定义，连接错误的status
const status = response.status || -1000;
if (status === 200 || status === 304 || status === 400) {
return response.data;
} else {
let errorInfo = '';
switch (status) {
case -1:
errorInfo = '远程服务响应失败,请稍后重试';
break;
case 400:
errorInfo = '400: 错误请求';
break;
case 401:
errorInfo = '401: 访问令牌无效或已过期';
break;
case 403:
errorInfo = '403: 拒绝访问';
break;
case 404:
errorInfo = '404：资源不存在';
break;
case 405:
errorInfo = '405: 请求方法未允许';
break;
case 408:
errorInfo = '408: 请求超时';
break;
case 500:
errorInfo = '500：访问服务失败';
break;
case 501:
errorInfo = '501：未实现';
break;
case 502:
errorInfo = '502：无效网关';
break;
case 503:
errorInfo = '503: 服务不可用';
break;
default:
errorInfo = `连接错误${status}`
}
return {status, msg: errorInfo}
}
}
// 异常状态下，返回错误信息
return {status: -404, msg: '网络异常'};
}
/**
* 返回axios方法
* @param url（如果传绝对地址则baseURL不会追加到url之前）
* @param method
* @param timeout
* @param data
* @param headers
* @param dataType
* @returns {AxiosPromise}
*/
export default function (url, {
method = 'post',
timeout = 10000,
data = {},
params = {},
headers = {'Content-Type': 'application/json;charset=UTF-8'},
responseType = 'json'
})
{
// 可根据不同method动态配置headers
if (method === 'get') {
headers = Object.assign({}, headers);
} else {
headers = Object.assign({}, headers);
}
const config = {
method: method,
timeout: timeout,
url: url,
baseURL: baseUrl,
data: data,
params: params,
headers: headers,
responseType: responseType
};
return axios(config);
}
src/axios/index.js 0 → 100644
浏览文件 @ 338e50ae
let baseUrl = "";
let env = process.env.VUE_APP_TITLE === 'alpha' ? 'alpha' : 'production';
switch (env) {
case 'production':
// baseUrl = "http://192.168.101.205:8086"; // 徐/
// baseUrl = "http://192.168.102.97:8086"; // 陈
baseUrl = "http://192.168.101.69:8081/index.html"; // 徐阳
// baseUrl = "http://223.4.69.30:8081"; // 阿里云环境
// baseUrl = "http://192.168.101.205:8086/activities"
break;
case 'alpha':
baseUrl = "http://223.4.69.30:8081"; // 阿里云环境
break;
}
export default baseUrl;
src/axios/services.js 0 → 100644
浏览文件 @ 338e50ae
import axios from './axios';
import url from './index';
const server = {
getPage(data) { //科协组织数据分布
return axios('/advice/page', {
method: 'post',
data
})
},
getPer() { //科协组织数据分布
return axios('/advice/periods', {
method: 'get'
})
},
delData(data) { //科协组织数据分布
return axios('/advice/batch', {
method: 'delete',
data
})
},
edit(data){
return axios('/advice',{
method:"post",
data
})
}
}
export default server;
src/main.js 0 → 100644
浏览文件 @ 338e50ae
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import axios from './axios/services'
import server from './axios/services';
import less from 'less'
import './assets/css/common.css'
Vue.use(less)
Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
Vue.prototype.$server = server;
// 安装element npm install element-ui -save
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 安装iview npm install iview -save
// 引入echarts插件 npm install echarts --save
// 安装vue-lottie包 npm install --save vue-lottie
// import lottie from 'vue-lottie';
Vue.use(ElementUI);
import 'lib-flexible'
// Vue.component('lottie', lottie);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
src/router.js 0 → 100644
浏览文件 @ 338e50ae
import Vue from 'vue'
import Router from 'vue-router'
import login from './views/login.vue'
Vue.use(Router);
export default new Router({
routes:[{
path: '/',
redirect: '/home'
},
{
path: '/login',
name:"login",
component:login
},
{
path: '/login',
name:"login",
component:login
},
{
path: '/app',
name:"app",
redirect:"/home",
component:()=>import('./views/layout.vue'),
children:[{
path: '/home',
name:"home",
component:()=>import('./views/home.vue')
},{
path: '/addNew',
name:"addNew",
component:()=>import('./views/addNew.vue')
}
]
}
]
})
src/store/action.js 0 → 100644
浏览文件 @ 338e50ae
const actions = {
};
export default actions;
src/store/getter.js 0 → 100644
浏览文件 @ 338e50ae
const getters = {
};
export default getters;
src/store/index.js 0 → 100644
浏览文件 @ 338e50ae
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './action';
import getters from './getter';
import mutations from './mutation';
import state from './state';
Vue.use(Vuex);
export default new Vuex.Store({
state,
actions,
getters,
mutations
});
src/store/mutation.js 0 → 100644
浏览文件 @ 338e50ae
const mutations = {
};
export default mutations;
src/store/state.js 0 → 100644
浏览文件 @ 338e50ae
const state = {
};
export default state;
src/views/addNew.vue 0 → 100644
浏览文件 @ 338e50ae
<template>
<div class="content-add">
<div class="backList">
<div style="color: #306fd7;"><</div>
<div style="color: #306fd7;cursor:pointer" @click="cancel">返回</div>
<div>&nbsp;/&nbsp;新增建议</div>
</div>
<div>
<el-form ref="rulesForm" label-position="right" :rules="rules" :inline="true" :model="rulesForm" label-width="120px" class="inline-form2">
<!-- <el-form-item label="年份：">
<el-date-picker
v-model="timeChose"
type="year"
placeholder="选择年">
</el-date-picker>
</el-form-item> -->
<el-form-item label="发刊日期：" prop="publicationDate">
<el-date-picker :editable="false" type="date" placeholder="开始日期" value-format="yyyy年MM月dd" v-model="rulesForm.publicationDate"></el-date-picker>
</el-form-item>
<el-form-item label="期数：" prop="periods">
<el-input v-model="rulesForm.periods"></el-input>
</el-form-item>
</el-form>
<el-form ref="rulesForm" label-position="right" :rules="rules" :inline="true" :model="rulesForm" label-width="120px" class="inline-form">
<el-form-item label="建议人：" prop="advicePerson">
<el-input placeholder="请输入建议人" v-model="rulesForm.advicePerson"></el-input>
</el-form-item>
<el-form-item label="建议单位：" prop="adviceUnit">
<el-input v-model="rulesForm.adviceUnit" placeholder="请输入建议单位" ></el-input>
</el-form-item>
<el-form-item label="备注：" prop="remarks">
<el-input v-model="rulesForm.remarks" placeholder="请输入批示信息（是否有领导批示）" ></el-input>
</el-form-item>
</el-form>
<el-form ref="rulesForm" label-position="right" :rules="rules" :model="rulesForm" label-width="120px">
<el-form-item label="标题：" prop="adviceName">
<el-input v-model="rulesForm.adviceName" placeholder="请输入标题" ></el-input>
</el-form-item>
<el-form-item label="建议摘要：" prop="content">
<el-input v-model="rulesForm.content"
type="textarea"
:autosize="{ minRows: 2, maxRows: 100}"
placeholder="请输入建议摘要"></el-input>
</el-form-item>
</el-form>
</div>
<div class="bottom-btn">
<div class="cancel">取消</div>
<div class="submit">确定</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
fileList: [],
timeChose:"",
rulesForm:{"adviceName": "",
"advicePerson": "",
"adviceUnit": "",
"content": "",
"periods": "",
"publicationDate": "",
"remarks": ""},
rules: {
adviceName: [
{ required: true, message: '请输入', trigger: 'change' }
],
publicationDate: [
{ required: true, message: '请选择', trigger: 'change' }
],
content: [
{ required: true, message: '请输入', trigger: 'change' }
],
advicePerson: [
{ required: true, message: '请输入', trigger: 'change' }
],
adviceUnit: [
{ required: true, message: '请输入', trigger: 'change' }
],
remarks: [
{ required: true, message: '请输入', trigger: 'change' }
],
remarks: [
{ required: true, message: '请输入', trigger: 'change' }
],
periods: [
{ required: true, message: '请输入', trigger: 'change' }
]
},
}
},
methods:{
submit(){
this.$refs["rulesForm"].validate((valid) => {
if (valid) {
this.$axios.edit(this.rulesForm).then(res=>{
sessionStorage.setItem("add",1)
this.$message.success("操作成功")
this.$router.back()
}).catch(err=>{
})
}else{
return false
}
})
},
cancel(){
sessionStorage.setItem("add",1)
this.$router.back()
},
},
mounted(){
if( sessionStorage.getItem("add") == 0){
this.rulesForm = JSON.parse(sessionStorage.getItem('data'))
}
}
}
</script>
<style lang="less" scoped>
.content-add{
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 20px 36px;
overflow-y: auto;
font-family: "AlibabaPuHuiTi-Regular";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
/deep/ .el-form .el-form-item__label{
font-family: "AlibabaPuHuiTi-Regular";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.inline-form{
display: flex !important;
justify-content: space-between;
/deep/ .el-form-item{
width: 32%;
}
/deep/ .el-form-item .el-form-item__content{
width: calc(100% - 120px);
}
}
.inline-form2{
display: flex !important;
// justify-content: space-between;
/deep/ .el-form-item{
width: 33%;
}
/deep/ .el-form-item .el-form-item__content{
width: calc(100% - 120px);
}
}
/deep/ .el-textarea .el-textarea__inner{
font-family: "AlibabaPuHuiTi-Regular";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
min-height:400px !important;
}
.backList{
width: 100%;
height: 32px;
display: flex;
border-bottom: 1px dashed #dedede;
margin-bottom: 40px;
}
.up-rect{
width: 36px;
height: 36px;
background-color: #f5f5f5;
border-radius: 2px;
border: solid 1px #c8c8c8;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.up-icon{
width: 16px;height: 14px;
background-image: url('../assets/img/upload_icon.png');
cursor: pointer;
}
}
.bottom-btn{
font-family: "AlibabaPuHuiTi-Medium";
font-size: 20px;
font-weight: normal;
font-stretch: normal;
text-align: center;
line-height: 50px;
letter-spacing: 4px;
width: 100%;
display: flex;
justify-content: center;
margin-top: 70px;
.cancel{
cursor: pointer;
width: 158px;
height: 50px;
background-color: #ffffff;
border-radius: 4px;
border: solid 1px #5c87c1;
color: #317ce3;
margin-right: 92px;
}
.submit{
cursor: pointer;
width: 158px;
height: 50px;
background-color: #2570d7;
border-radius: 4px;
color: #ffffff;
}
}
}
</style>
\ No newline at end of file
src/views/home.vue 0 → 100644
浏览文件 @ 338e50ae
<template>
<div class="content-act">
<div class="content-top">
<div class="top-left">
<div class="btn btn1" style="cursor:pointer" @click="add">十新增建议</div>
<el-date-picker
v-model="timeChose"
style="margin-right:16px"
type="year"
placeholder="选择年">
</el-date-picker>
<!-- <el-select v-model="sel" class="select-input" placeholder="选择年份">
<el-option value="" label="全部"></el-option>
<el-option value="已发布" label="已发布"></el-option>
<el-option value="未发布" label="未发布"></el-option>
</el-select> -->
<el-select v-model="bookChose" class="select-input" placeholder="选择期数" @change="getData">
<el-option value="" label="全部"></el-option>
<el-option :value="item" :label="item" v-for="(item,index) in per" :key="index"></el-option>
</el-select>
</div>
<div class="top-right">
<el-input class="search-input" v-model="searchValue" placeholder="请输入活动名称"></el-input>
<el-button style="middle" type="primary" @click="getData">搜索</el-button>
</div>
</div>
<div class="table">
<el-table
:row-style="{height:'47px'}"
:data="tableData"
style="width: 100%">
<el-table-column
prop="periods"
label="期数"
width="180">
</el-table-column>
<el-table-column
prop="adviceName"
label="建议名称"
width="270">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.adviceName" placement="top-start">
<div class="overText">
<span >{{scope.row.adviceName}}</span>
</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
prop="publicationDate"
label="发刊日期"
width="270">
</el-table-column>
<el-table-column
prop="advicePerson"
label="建议人"
width="270">
</el-table-column>
<el-table-column
prop="adviceUnit"
label="建议单位"
width="270">
</el-table-column>
<el-table-column
prop="remarks"
label="备注"
width="270">
</el-table-column>
<el-table-column
label="操作" >
<template slot-scope="scope">
<div class="btn-opt">
<div style="color: #4188ec;" @click="edit(scope.row)">编辑</div>
<div style="color: #e33e3e;" @click="edit(scope.row)">删除</div>
</div>
<!-- <el-button>编辑</el-button> -->
</template>
</el-table-column>
</el-table>
</div>
<div class="change-page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total,sizes, prev, pager, next"
:total="pageTotal">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sel:"",
pageTotal:0,
timeChose:"",
bookChose:"",
tableData: [],
searchValue:"",
currentPage:1,
per:[],
pageSize:10
}
},
watch:{
timeChose:function(){
this.getData()
}
},
methods:{
add(){
sessionStorage.setItem("add",1)
this.$router.push("/addNew")
},
edit(row){
sessionStorage.setItem("add",0)
sessionStorage.setItem('data',JSON.stringify(row))
this.$router.push("/addNew")
},
del(row){
this.$axios.delData(row.id).then(res=>{
this.getData()
}).catch(err=>{
console.log(err);
})
},
changePage(v){
console.log(v);
this.getData(false)
},
getData(page=true){
if(page == true){
this.currentPage = 1
}
let data = {
"pageNum": this.currentPage,
"pageSize": this.pageSize,
"periods":this.bookChose,
"query": this.searchValue,
"year": this.timeChose
}
this.$axios.getPage(data).then(res=>{
console.log(res);
this.tableData = res.data.data.content;
this.pageTotal = res.data.data.total
}).catch(err=>{
})
},
handleSizeChange(val) {
this.pageSize = val
this.getData()
},
handleCurrentChange(val) {
this.getData(false)
}
},
mounted(){
this.getData()
},
beforeMount() {
this.$axios.getPer().then(res=>{
console.log(res);
this.per = res.data.data
}).catch(err=>{})
}
}
</script>
<style lang="less" scoped>
.content-act{
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 20px 36px;
overflow-y: auto;
.content-top{
display: flex;
width: 100%;
margin-bottom: 17px;
justify-content: space-between;
.top-left{
display: flex;
align-items: center;
.select-input{
width: 120px !important;
margin-right: 24px;
}
}
.top-right{
display: flex;
align-items: center;
justify-content: flex-end;
.act-font{
width: 80px;
color: #333;
font-size: 16px;
}
.search-input{
width: 340px !important;
}
}
.btn{
height: 38px;
background-color: #306fd7;
box-shadow: 0px 1px 1px 0px
rgba(16, 66, 149, 0.6);
border-radius: 4px;
font-family: "AlibabaPuHuiTi-Medium";
font-size: 16px;
text-align: center;
line-height: 38px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 2px;
color: #ffffff;
margin-right: 36px;
}
.btn1{
width: 130px;
}
}
.table{
width: 100%;
max-height: 800px;
overflow-y:auto ;
/deep/ .el-table{
font-family: "AlibabaPuHuiTi-Regular";
font-size: 16px;
line-height: 16px;
letter-spacing: 0px;
color: #4e4e4e;
}
/deep/ .el-table th{
background-color: #f3f6fb;
font-family: "AlibabaPuHuiTi-Medium";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 16px;
letter-spacing: 0px;
color: #4e4e4e;
}
}
.change-page{
display: flex;
justify-content: center;
align-items: center;
margin-top: 33px;
/deep/ .el-pagination .el-pager li{
border-radius: 2px;
border: solid 1px #dcdcdc;
margin-right: 9px;
}
}
}
.btn-opt{
display: flex;
justify-content: space-between;
width: 50%;
}
.overText{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
</style>
\ No newline at end of file
src/views/layout.vue 0 → 100644
浏览文件 @ 338e50ae
<template>
<div class="layout">
<div class="header">
<div class="title">
科学会堂后台管理系统
</div>
<div class="user">
<div class="user-icon"></div>
<div class="user-name">Admin</div>
<div class="login-out">退出</div>
</div>
</div>
<div class="content">
<div class="main-router">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: "layout",
components: {},
data() {
return {
};
},
methods: {
},
};
</script>
<style lang="less" scoped>
.layout{
width: 100%;
height: 100%;
}
.header{
height: 90px;
box-sizing: border-box;
padding: 0 40px 0 67px;
display: flex;
align-items: center;
justify-content: space-between;
.title{
font-family: "baseFont";
font-size: 38px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 4px;
color: #ffffff;
}
.user{
display: flex;
justify-content: flex-end;
align-items: center;
.user-icon{
width: 42px;
height: 42px;
background-image: url("../assets/img/admin.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.user-name{
font-family: "AlibabaPuHuiTi-Regular";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 28px;
letter-spacing: 0px;
color: #ffffff;
margin-left: 16px;
margin-right: 20px;
}
.login-out{
width: 94px;
height: 38px;
border-radius: 8px;
border: solid 1px #ffffff;
font-family: "AlibabaPuHuiTi-Regular";
font-size: 18px;
text-align: center;
font-weight: normal;
font-stretch: normal;
line-height: 38px;
letter-spacing: 0px;
color: #ffffff;
cursor: pointer;
}
}
}
.content{
box-sizing: border-box;
width: 100%;
height: calc(100% - 90px);
padding: 0 20px 20px 20px;
// border: 1px solid red;
display: flex;
.navi{
width: 60px;
height: 100%;
.navi-btn{
width: 60px;
height: 236px;
background-color: #1659ce;
box-shadow: 0px 2px 9px 1px
rgba(0, 0, 0, 0.06);
border-radius: 8px 0px 0px 8px;
margin-top: 30px;
font-family: "baseFont";
font-size: 22px;
font-weight: normal;
font-stretch: normal;
line-height: 28px;
letter-spacing: 11px;
color: #fff;
// text-align: center;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding-left: 20px;
}
}
.main-router{
width: 1880px;
height: 100%;
// border: 1px solid red;
background-color: #ffffff;
box-shadow: 0px 2px 11px 3px
rgba(0, 0, 0, 0.07);
border-radius: 8px;
}
}
</style>
src/views/login.vue 0 → 100644
浏览文件 @ 338e50ae
<template>
<div class="layout">
<div class="login-left">
<div class="login-title">
欢迎登录
</div>
<div class="split">一</div>
<div class="login-resume">科学会堂后台</div>
<div class="login-resume">管理系统</div>
</div>
<div class="login-content">
<div class="pass-title">账号登录</div>
<div class="grey-line"><div class="blue-line"></div> </div>
<ul class="mian-css">
<li class="login-li">
<input class="login-input" v-model="userNameLogin" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" type="text" placeholder="用户名"/><i class="user-icon input-icon"></i>
</li>
<li class="login-li">
<input class="login-input" v-model="passwordLogin" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" type="password" placeholder="密码" @keyup.enter="login"/><i class="pwd-icon input-icon"></i>
</li>
<li class="login-li">
<button class="login-btn" @click="login">登录</button>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name:"login",
data() {
return {
}
},
}
</script>
<style lang="less" scoped>
.layout{
width: 100%;
height: 100%;
background-image: url("../assets/img/appBg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
.login-left{
width: 588px;
height: 492px;
background-color: rgba(255,255,255,0.15);
border-radius: 8px 0px 0px 8px;
box-sizing: border-box;
padding-top: 112px;
padding-left: 106px;
.login-title{
// width: 186px;
width: 100%;
height: 42px;
font-family: "Alibaba-PuHuiTi-Light";
font-size: 45px;
font-weight: normal;
font-stretch: normal;
line-height: 26px;
letter-spacing: 3px;
color: #ffffff;
}
.split{
width: 42px;
height: 3px;
background-color: #ffffff;
margin-top: 28px;
margin-bottom: 48px;
}
.login-resume{
width: 100%;
height: 61px;
font-family: "AlibabaPuHuiTi-Bold";
font-size: 64px;
font-weight: normal;
font-stretch: normal;
line-height: 26px;
letter-spacing: 2px;
margin-bottom: 21px;
color: #ffffff;
}
}
.login-content{
width: 600px;
height: 682px;
background-color: #ffffff;
box-shadow: 0px 2px 20px 0px
rgba(6, 25, 72, 0.3);
border-radius: 8px;
box-sizing: border-box;
padding: 86px 52px 0 52px;
.pass-title{
height: 24px;
font-size: 26px;
font-family: "AlibabaPuHuiTi-Medium";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 26px;
letter-spacing: 0px;
color: #333333;
}
.blue-line{
width: 105px;
height: 3px;
background-color: #0e2c73;
border-radius: 1px;
z-index: 1;
left: 0;
top: -1px;
position: absolute;
// top: 1px;
}
.grey-line{
margin-top: 42px;
margin-bottom: 80px;
position: relative;
width: 500px;
height: 1px;
background-color: #e5e5e5;
border-radius: 1px;
z-index: 0;
}
.login-input{
width: 480px;
height: 66px;
font-family: "AlibabaPuHuiTi-Regular";
box-sizing: border-box;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
line-height: 10px;
letter-spacing: 0px;
border-radius: 6px;
color: #333333;
background-color: #f4f4f4;
margin-bottom: 44px;
border: solid 1px #dcdcdc;
// border: none;
// background-image: url("../assets/images/login-input.png") !important;
padding-left: 50px;
}
.login-input:focus{
background-color: #fff;
border: solid 1px #306fd7;
}
.login-btn{
width: 482px;
height: 86px;
background-image: url(../assets/img/login.png);
border: none;
font-family: "AlibabaPuHuiTi-Medium";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 10px;
letter-spacing: 7px;
cursor: pointer;
box-sizing: border-box;
margin-top: 46px;
padding-bottom: 8px;
color: #ffffff;
}
.login-btn:hover{
background-image: url(../assets/img/login-hover.png);
}
// input::-webkit-input-placeholder {
// color: #333333;
// }
// input:-moz-placeholder {
// color: #333333;
// }
// input:-ms-input-placeholder {
// color: #333333;
// }
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
浏览文件 @ 338e50ae
module.exports = {
// 基本路径
publicPath: './',
// 输出文件目录
outputDir: process.env.outputDir,
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 用于放置生成的静态资源
assetsDir: 'static',
// 指定生成的 index.html 的输出路径 (打包之后，改变系统默认的index.html的文件名)
indexPath: 'index.html',
filenameHashing: true,
// vue-loader 配置项
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
devServer: {
open: true, // 是否自动打开浏览器页面
host: '0.0.0.0',
port: 8080,
https: false, // 使用https提供服务
hotOnly: false,
proxy: null
},
// image-webpack-loader图片压缩配置
// chainWebpack: config => {
// config.module
// .rule('images')
// .use('image-webpack-loader')
// .loader('image-webpack-loader')
// .options({
// bypassOnDebug: true
// })
// .end()
// },
chainWebpack: (config) => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 192
})
},
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 192, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: ['menu-list'], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
// mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
// minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
remUnit: 192
}),
]
}
}
},
// 第三方插件配置
pluginOptions: {},
// module: {
// rules: [{
// test: /\.css$/,
// use: [{
// loader: 'style-loader'
// }, {
// loader: 'css-loader'
// }, {
// loader: 'px2rem-loader',
// // options here
// options: {
// remUnit: 192,//设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192
// // remPrecision: 8//换算的rem保留几位小数点
// }
// }]
// }]
// }
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论