forked from mt-fe-group/mt-yd-ui
'update'
This commit is contained in:
Fanzink
@@ -1,47 +1,240 @@
|
||||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: fzq
|
||||
* @Date: 2022-12-09 15:44:37
|
||||
* @LastEditors: fzq
|
||||
* @LastEditTime: 2022-12-11 20:47:56
|
||||
-->
|
||||
<template>
|
||||
<el-card shadow="never" class="aui-card--fill">
|
||||
<!-- <div class="mod-home">
|
||||
<h3>项目介绍</h3>
|
||||
<ul>
|
||||
<li>
|
||||
renren-ui基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-ui" target="_blank">renren-security</a>后台管理前端功能，提供一套更优的前端解决方案
|
||||
</li>
|
||||
<li>前后端分离，通过token进行数据交互，可独立部署</li>
|
||||
<li>动态菜单，通过菜单管理统一管理访问路由</li>
|
||||
<li>演示地址：<a href="http://demo.open.renren.io/renren-security" target="_blank">http://demo.open.renren.io/renren-security</a> (账号密码：admin/admin)</li>
|
||||
</ul>
|
||||
<h3>获取帮助</h3>
|
||||
<ul>
|
||||
<li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
|
||||
<li>前端Git地址：<a href="https://gitee.com/renrenio/renren-ui" target="_blank">https://gitee.com/renrenio/renren-ui</a></li>
|
||||
<li>后台Git地址：<a href="https://gitee.com/renrenio/renren-security" target="_blank">https://gitee.com/renrenio/renren-security</a></li>
|
||||
<li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
|
||||
</ul>
|
||||
<h3>官方微信群</h3>
|
||||
<ul>
|
||||
<li>扫码下面的二维码，关注【人人开源】公众号，回复【加群】，即可根据提示加入微信群！</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</el-card>
|
||||
<div class="choicepart-container">
|
||||
<!-- <div class="choicepat-navbar">
|
||||
<navbar :showhome="false" :show-title="true" />
|
||||
</div> -->
|
||||
<div class="choicepart-box">
|
||||
<div
|
||||
v-for="(item, index) in routeList"
|
||||
:key="item.path"
|
||||
class="choicepart-item"
|
||||
@click="handelClick(item, index)"
|
||||
>
|
||||
<!-- :style="{ background: colorArr.colorList[index % 9] }" -->
|
||||
<div class="choicepart-item-border">
|
||||
<img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt="">
|
||||
</div>
|
||||
<div class="choicepart-item-title" :title="item.name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import db from '@/utils/indexDB'
|
||||
// import { mapGetters } from 'vuex'
|
||||
// import { constantRoutes } from '@/router'
|
||||
// import { Navbar } from '@/layout/components'
|
||||
// import { downLoadBGP } from '@/api/user'
|
||||
import store from '@/store'
|
||||
// import { blobToBase64 } from '@/utils/blobToBase64'
|
||||
const colorList = ['#8080ff', '#ff8080', '#b004fb', '#ff409f', '#00caca', '#8080c0', '#cccc00', '#ff8040', '#0c4d9e']
|
||||
const colorList1 = ['#b4b4ff', '#ffb4b4', '#c648fb', '#ff86c2', '#66f6f6', '#a2a2f3', '#ffff9a', '#ffc3a5', '#367cd4']
|
||||
|
||||
export default {
|
||||
created() {
|
||||
this.$router.replace({ name: 'sys-log-login' })
|
||||
},
|
||||
name: 'ChoicePart',
|
||||
// components: { Navbar },
|
||||
data() {
|
||||
return {
|
||||
baseImg: require('../../assets/img/login-back.jpg'),
|
||||
coverImgUrl: localStorage.getItem('backImg') || '',
|
||||
rowNum: 1,
|
||||
colorArr: {
|
||||
colorList,
|
||||
colorList1
|
||||
},
|
||||
windowWidth: 0,
|
||||
dbConnect: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
routeList() {
|
||||
// const cangoList = []
|
||||
// const permission_routes = store.getters.permission_routes
|
||||
// console.log(permission_routes)
|
||||
// permission_routes.map(item => {
|
||||
// if (!item.hidden && item.meta) {
|
||||
// cangoList.push(item)
|
||||
// }
|
||||
// })
|
||||
// const formatList = cangoList.map((item, index) => {
|
||||
// return this.setIndex(item, index)
|
||||
// })
|
||||
// console.log(formatList)
|
||||
return window.SITE_CONFIG['menuList']
|
||||
},
|
||||
// ...mapGetters(['language', 'dictList', 'dictObj'])
|
||||
},
|
||||
created() {
|
||||
this.windowWidth = window.innerWidth
|
||||
// this.dbConnect = db({
|
||||
// DBName: 'back_img',
|
||||
// version: '1.0',
|
||||
// params: [
|
||||
// { name: 'id', unique: true },
|
||||
// { name: 'imgUrl', unique: true }
|
||||
// ]
|
||||
// })
|
||||
// const request = this.dbConnect.openDB()
|
||||
// request.onsuccess = () => {
|
||||
// // const result = this.dbConnect.search('back_img', 'id', 1)
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.dictList, this.dictObj)
|
||||
// this.getPic()
|
||||
},
|
||||
methods: {
|
||||
// getPic() {
|
||||
// // edit here
|
||||
// downLoadBGP().then(response => {
|
||||
// if (response.data.size) {
|
||||
// blobToBase64(response.data).then(res => {
|
||||
// this.coverImgUrl = res
|
||||
// localStorage.setItem('backImg', res)
|
||||
// console.log(res)
|
||||
// // const result = this.dbConnect.search('back_img', 'id', 1)
|
||||
// // if (result.result) {
|
||||
// // this.dbConnect.update({
|
||||
// // id: 1,
|
||||
// // imgUrl: res
|
||||
// // })
|
||||
// // } else {
|
||||
// // this.dbConnect.add({
|
||||
// // id: 1,
|
||||
// // imgUrl: res
|
||||
// // })
|
||||
// // }
|
||||
// })
|
||||
// // this.coverImgUrl = response.data
|
||||
// // const temp = response.data.split('/')
|
||||
// // temp.splice(0, 2)
|
||||
// // this.coverImgUrl = 'http://zzdhg.mes.picaiba.com/' + temp.join('/')
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
resize() {},
|
||||
handelClick(item, index) {
|
||||
// this.$store.dispatch('app/setChoicepart', index)
|
||||
// if (item.meta.unuse) {
|
||||
// this.$message.warning(this.$t('choisePart.module'))
|
||||
// } else {
|
||||
// this.toRouter(item)
|
||||
// }
|
||||
this.toRouter(item)
|
||||
},
|
||||
toRouter(item) {
|
||||
console.log(item.children[0].url)
|
||||
if (item.children) {
|
||||
this.$router.push({name: item.children[0].url.replace(new RegExp('/','g'),'-')})
|
||||
} else {
|
||||
this.$router.push({name: item.children[0].url.replace(new RegExp('/','g'),'-')})
|
||||
}
|
||||
},
|
||||
setIndex(list, index) {
|
||||
list.meta.routeIndex = index
|
||||
if (list.children) {
|
||||
list.children.map(item => {
|
||||
this.setIndex(item, index)
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.mod-home {
|
||||
line-height: 1.5;
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.choicepart-container {
|
||||
min-width: 100%;
|
||||
min-height: 100vh;
|
||||
// background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
|
||||
background: url('../../assets/img/choicepart/choicepart-back.png') repeat;
|
||||
background-size: cover;
|
||||
overflow-x: scroll;
|
||||
.choicepart-box {
|
||||
width: 1440px;
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
padding-top: 16vh;
|
||||
min-height: 100vh;
|
||||
.choicepart-item {
|
||||
display: inline-block;
|
||||
width: 208px;
|
||||
height: 258px;
|
||||
margin: 40px;
|
||||
background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// border: 1px dashed #fff;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
|
||||
top: 0;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
img {
|
||||
width: 208px;
|
||||
height: 258px;
|
||||
}
|
||||
.choicepart-item-border {
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
line-height: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: lighter;
|
||||
color: #2c6bd8;
|
||||
overflow: hidden;
|
||||
}
|
||||
.choicepart-item-title {
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
letter-spacing: 2px;
|
||||
background-color: rgba($color: #0b58ff, $alpha: 0.45);
|
||||
}
|
||||
}
|
||||
.choicepart-item:hover {
|
||||
.choicepart-item-title {
|
||||
background-color: rgba($color: #0b58ff, $alpha: 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.choicepat-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
//滚动条凹槽的颜色，还可以设置边框属性
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
//滚动条的宽度
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
//滚动条的设置
|
||||
background-color: #dddddd;
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #bbb;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -176,6 +176,7 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(this.$route)
|
||||
},
|
||||
activated() {
|
||||
this.getDataList()
|
||||
|
||||
Reference in New Issue
Block a user