Skip to content

P
pet-business-web
Commit 0da9fc26 authored by v_liuhuaizhi's avatar v_liuhuaizhi
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 1559f6ac 0cceabc1
Hide whitespace changes
Inline Side-by-side
Showing with 306 additions and 32 deletions
src/assets/styles/btn.scss
View file @ 0da9fc26
@import './variables.scss';
@mixin colorBtn($color) {
background: $color;
&:hover {
color: $color;
&:before,
&:after {
background: $color;
}
}
}
.blue-btn {
@include colorBtn($blue)
}
.light-blue-btn {
@include colorBtn($light-blue)
}
.red-btn {
@include colorBtn($red)
}
.pink-btn {
@include colorBtn($pink)
}
.green-btn {
@include colorBtn($green)
}
.tiffany-btn {
@include colorBtn($tiffany)
}
.yellow-btn {
@include colorBtn($yellow)
}
.pan-btn {
font-size: 14px;
color: #fff;
padding: 14px 36px;
border-radius: 8px;
border: none;
outline: none;
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
background: #fff;
&:before,
&:after {
width: 100%;
transition: 600ms ease all;
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
&::after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
}
/** 四个字的绿色按钮*/
.fourWordsBtn{
padding: 7px 13px 7px 11px;
width: 105px;
height: 32px;
background: #5BB647;
border-radius: 4px 4px 4px 4px;
border: 1px solid #5BB647;
opacity: 1;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
font-size: 11px;
width: 11px;
height: 11px;
}
&:hover {
background: #83C374!important;
color: #FFFFFF!important;
border: 1px solid #83C374!important;
}
&:focus {
background: #55A343!important;
color: #FFFFFF!important;
border: 1px solid #55A343!important;
}
}
/** 查询按钮样式*/
.queryBtn{
padding: 7px 13px 7px 11px;
width: 80px;
height: 32px;
background: #5BB647;
border-radius: 4px 4px 4px 4px;
border: 1px solid #5BB647;
opacity: 1;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
width: 10px;
font-size: 10px;
height: 11px;
}
&:hover {
background: #83C374!important;
color: #FFFFFF!important;
border: 1px solid #83C374!important;
}
&:focus {
background: #55A343!important;
color: #FFFFFF!important;
border: 1px solid #55A343!important;
}
}
/** 删除按钮(四个字的删除)样式*/
.delBtn{
padding: 7px 13px 7px 11px;
width: 105px;
height: 32px;
background: #DB4747;
border-radius: 4px 4px 4px 4px;
border: 1px solid #DB4747;
opacity: 1;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
i{
width: 10px;
font-size: 10px;
height: 11px;
}
&:hover {
background: #E07171 !important;
color: #FFFFFF!important;
border: 1px solid #E07171 !important;
}
&:focus {
background: #DB4747!important;
color: #FFFFFF!important;
border: 1px solid #DB4747!important;
}
}
/** 重置按钮样式*/
.resetBtn{
padding: 7px 13px 7px 11px;
width: 80px;
height: 32px;
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 1px solid #E5E5E5;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
i{
width: 10px;
font-size: 10px;
height: 11px;
}
&:hover {
background: rgba(95,181,75,0.08);
opacity: 1;
border: 1px solid #5FB54B;
color: #333333!important;
}
&:focus {
background: rgba(85,163,67,0.08);
opacity: 1;
border: 1px solid #55A343;
color: #333333!important;
}
}
/** 两个按钮间的间距*/
.el-button + .el-button{
margin-left: 16px;
}
.custom-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #fff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
padding: 10px 15px;
font-size: 14px;
border-radius: 4px;
}
src/main.js
View file @ 0da9fc26
...@@ -5,7 +5,7 @@ import Cookies from 'js-cookie' ...@@ -5,7 +5,7 @@ import Cookies from 'js-cookie'
import Element from 'element-ui' import Element from 'element-ui'
import './assets/styles/element-variables.scss' import './assets/styles/element-variables.scss'
import "./utils/rem.js"; // 自适应分辨率
import '@/assets/styles/index.scss' // global css import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App' import App from './App'
......
src/router/index.js
View file @ 0da9fc26
...@@ -154,6 +154,7 @@ export const constantRoutes = [ ...@@ -154,6 +154,7 @@ export const constantRoutes = [
hidden: true, hidden: true,
permissions: ['system:article:query'], permissions: ['system:article:query'],
children: [ children: [
{ {
path: 'article-management/article-management/article-detail/:id', path: 'article-management/article-management/article-detail/:id',
component: () => import('@/views/article-management/article-detail'), component: () => import('@/views/article-management/article-detail'),
......
src/utils/rem.js 0 → 100644
View file @ 0da9fc26
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
src/views/article-management/article-insert.vue
View file @ 0da9fc26
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<div style="display:flex;"> <div style="display:flex;">
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="文章标题" prop="articleTitle"> <el-form-item label="文章标题" prop="articleTitle">
<el-input v-model="form.articleTitle" placeholder="请输入文章标题"/> <el-input v-model="form.articleTitle" maxlength="40" show-word-limit placeholder="请输入文章标题"/>
</el-form-item> </el-form-item>
<el-form-item label="权重" prop="articleWeight"> <el-form-item label="权重" prop="articleWeight">
<el-input-number v-model="form.articleWeight" :min="1" :max="9999" controls-position="right"></el-input-number> <el-input-number v-model="form.articleWeight" :min="1" :max="9999" controls-position="right"></el-input-number>
......
src/views/article-management/article-management.vue
View file @ 0da9fc26
<template> <template>
<div style="background-color: #FFFFFF;">
<div class="app-container"> <div class="app-container">
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small"> <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
<el-form-item label="文章标题" prop="articleTitle"> <el-form-item prop="articleTitle">
<el-input <el-input
v-model="queryParams.articleTitle" v-model="queryParams.articleTitle"
clearable clearable
...@@ -9,7 +10,7 @@ ...@@ -9,7 +10,7 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="创建时间" prop="articleCreateTime"> <el-form-item prop="articleCreateTime">
<el-date-picker v-model="queryParams.articleCreateTime" <el-date-picker v-model="queryParams.articleCreateTime"
clearable clearable
placeholder="请选择创建时间" placeholder="请选择创建时间"
...@@ -18,7 +19,7 @@ ...@@ -18,7 +19,7 @@
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="articleStatus"> <el-form-item prop="articleStatus">
<el-select v-model="queryParams.articleStatus" clearable placeholder="请选择文章状态"> <el-select v-model="queryParams.articleStatus" clearable placeholder="请选择文章状态">
<el-option <el-option
v-for="dict in dict.type.article_status" v-for="dict in dict.type.article_status"
...@@ -28,7 +29,7 @@ ...@@ -28,7 +29,7 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="排序方式" prop="sort"> <el-form-item prop="sort">
<el-select <el-select
v-model="queryParams.params.sort" v-model="queryParams.params.sort"
clearable clearable
...@@ -47,39 +48,39 @@ ...@@ -47,39 +48,39 @@
<el-button <el-button
v-hasPermi="['business:article:add']" v-hasPermi="['business:article:add']"
icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline"
size="mini" type="success" size="mini" class="fourWordsBtn"
@click="handleAdd" @click="handleAdd"
>新增文章 >新增文章
</el-button> </el-button>
<el-button icon="el-icon-search" size="mini" type="success" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-search" size="mini" class="queryBtn" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" class="resetBtn" @click="resetQuery">重置</el-button>
<!-- 选择全部--> <!-- 选择全部-->
<el-button v-hasPermi="['system:manage:export']" icon="el-icon-right" size="mini" type="success" <el-button v-hasPermi="['system:manage:export']" icon="el-icon-right" size="mini" class="fourWordsBtn"
@click="selectAll" @click="selectAll"
>选择全部 >选择全部
</el-button> </el-button>
<!-- 反向选择--> <!-- 反向选择-->
<el-button v-hasPermi="['system:manage:export']" <el-button v-hasPermi="['system:manage:export']"
icon="el-icon-back" icon="el-icon-back"
size="mini" type="success" size="mini" class="fourWordsBtn"
@click="reverseSelect" @click="reverseSelect"
>反向选择 >反向选择
</el-button> </el-button>
<!-- 批量导入--> <!-- 批量导入-->
<el-button <el-button
v-hasPermi="['system:pets:export']" v-hasPermi="['system:pets:export']"
icon="el-icon-bottom-left" icon="el-icon-download"
size="mini" size="mini"
type="success" class="fourWordsBtn"
@click="handleExport" @click="handleExport"
>批量导入 >批量导入
</el-button> </el-button>
<!-- 批量导出--> <!-- 批量导出-->
<el-button <el-button
v-hasPermi="['system:pets:export']" v-hasPermi="['system:pets:export']"
icon="el-icon-top-right" icon="el-icon-upload2"
size="mini" size="mini"
type="success" class="fourWordsBtn"
@click="handleExport" @click="handleExport"
>批量导出 >批量导出
</el-button> </el-button>
...@@ -92,11 +93,11 @@ ...@@ -92,11 +93,11 @@
<el-table-column align="center" type="selection" width="55" reserve-selection/> <el-table-column align="center" type="selection" width="55" reserve-selection/>
<el-table-column align="center" label="序号" min-width="55" type="index"/> <el-table-column align="center" label="序号" min-width="55" type="index"/>
<el-table-column :show-overflow-tooltip="true" align="center" label="文章标题" prop="articleTitle" width="200"/> <el-table-column :show-overflow-tooltip="true" align="center" label="文章标题" prop="articleTitle" width="200"/>
<el-table-column :show-overflow-tooltip="true" align="center" label="文章内容" prop="articleContent" width="200"> <el-table-column :show-overflow-tooltip="true" align="center" label="文章内容" prop="articleContent" width="200"/>
<template #default="{row: {articleContent}}"> <!-- <template #default="{row: {articleContent}}">-->
<div v-html="articleContent"></div> <!-- <div v-html="articleContent"></div>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column align="center" label="权重" min-width="55" prop="articleWeight"/> <el-table-column align="center" label="权重" min-width="55" prop="articleWeight"/>
<el-table-column align="center" label="创建时间" min-width="80" prop="articleCreateTime" width="180"> <el-table-column align="center" label="创建时间" min-width="80" prop="articleCreateTime" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -115,7 +116,7 @@ ...@@ -115,7 +116,7 @@
icon="el-icon-document" icon="el-icon-document"
plain plain
size="mini" size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(123, 213, 102);" style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(95,181,75);"
type="success" type="success"
@click="handleDetail(scope.row)" @click="handleDetail(scope.row)"
>详情 >详情
...@@ -125,7 +126,7 @@ ...@@ -125,7 +126,7 @@
icon="el-icon-edit" icon="el-icon-edit"
plain plain
size="mini" size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(97,200,238);" style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(52,144,206);"
type="primary" type="primary"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
>编辑 >编辑
...@@ -136,7 +137,7 @@ ...@@ -136,7 +137,7 @@
icon="el-icon-delete" icon="el-icon-delete"
plain plain
size="mini" size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(255,67,82);" style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(219,71,71);"
type="danger" type="danger"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
>删除 >删除
...@@ -147,7 +148,7 @@ ...@@ -147,7 +148,7 @@
icon="el-icon-video-pause" icon="el-icon-video-pause"
plain plain
size="mini" size="mini"
style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(255,67,82);" style="width: 50px; border-radius: 6px 6px 6px 6px;border: 1px solid rgb(255,157,78);"
type="warning" type="warning"
@click="handleChange(scope.row)" @click="handleChange(scope.row)"
>下架 >下架
...@@ -207,6 +208,7 @@ ...@@ -207,6 +208,7 @@
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -303,7 +305,9 @@ export default { ...@@ -303,7 +305,9 @@ export default {
}, },
/** 编辑按钮操作--跳转文章编辑页 */ /** 编辑按钮操作--跳转文章编辑页 */
handleUpdate(row) { handleUpdate(row) {
console.log("start to edit..." + row)
this.reset() this.reset()
console.log("start to edit...")
this.$router.push({ this.$router.push({
name: 'ArticleEdit', params: { id: row.id } name: 'ArticleEdit', params: { id: row.id }
}) })
......
vue.config.js
View file @ 0da9fc26
...@@ -11,6 +11,27 @@ const name = process.env.VUE_APP_TITLE || '萌宠医院信息管理平台' // ...@@ -11,6 +11,27 @@ const name = process.env.VUE_APP_TITLE || '萌宠医院信息管理平台' //
const port = 1099 // 端口 const port = 1099 // 端口
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 16
})
// 使用等比适配插件
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
// vue.config.js 配置说明 // vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档 // 这里只列一部分，具体配置参考文档
...@@ -24,7 +45,17 @@ module.exports = { ...@@ -24,7 +45,17 @@ module.exports = {
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下） // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: 'static', assetsDir: 'static',
// 是否开启eslint保存检测，有效值：ture | false | 'error' // 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development', // lintOnSave: process.env.NODE_ENV === 'development',
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
},
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false, productionSourceMap: false,
// webpack-dev-server 相关配置 // webpack-dev-server 相关配置
...@@ -47,13 +78,13 @@ module.exports = { ...@@ -47,13 +78,13 @@ module.exports = {
}, },
disableHostCheck: true disableHostCheck: true
}, },
css: { // css: {
loaderOptions: { // loaderOptions: {
sass: { // sass: {
sassOptions: { outputStyle: "expanded" } // sassOptions: { outputStyle: "expanded" }
} // }
} // }
}, // },
configureWebpack: { configureWebpack: {
name: name, name: name,
output: { output: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment