|
|
|
@@ -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> |
Fanzink
1 year ago
