hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 02:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页案例样式

Browse Source
This commit is contained in:
lmj
2022-06-02 16:42:13 +08:00
parent 26e9491c36
commit eaf5685fcb
5 changed files with 168 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/modules/cases.js
View File

@@ -3,7 +3,7 @@ import ajax from '@/utils/xajax.js'
/**首页查询
* pageSize
* orderField
* orderField
* orderAsc
*/
const indexList = function(query) {

2
src/api/modules/dict.js
View File

@@ -8,7 +8,7 @@
const items=function(key){
return ajax.get('/xboe/m/dictionary/items?key='+key);
}
// 修改
// 修改
//@param key 对应字段后缀
//
// 案例的组织机构字典 org_domain key

94
src/views/Index.vue
View File

@@ -105,6 +105,44 @@
</el-card>
</div>
</div>
</div>
<!-- 推荐案例2版 -->
<div class="modules">
<div class="modules-title">
<span class="modules-text">推荐案例</span>
<span class="quyer-tag">
<a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
<a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
</span>
<span class="more"><router-link to="/case">更多&nbsp;></router-link></span>
</div>
<div class="modules-list xrow" style="height: 235px;overflow: hidden;">
<div class="index-course xrow-course" v-for="ca in caseList.list" :key="ca.id">
<div class="casetwo" :body-style="{ padding: '0px' }">
<div class="case-top"></div>
<div class="case-conent">
<div class="case-time">
{{ca.sysCreateTime.substring(0,10)}}
</div>
<span class="case-title one-line-ellipsis">
<a :href="'case/detail?id='+ca.id" target="_blank">{{ca.title}}</a>
</span>
<div class="case-text three-line-ellipsis">
{{ca.content}}
</div>
<div class="case-inter">
<interactBar style="width:180px" :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar>
</div>
</div>
<div style="margin-top:48%;margin-left:20px">
<authorInfo :avatar="ca.authorInfo.avatar" :name="ca.authorInfo.name" :info="ca.authorInfo.orgInfo" :sex="ca.authorInfo.sex"></authorInfo></div>
</div>
</div>
</div>
</div>
<!-- 推荐案例 -->
<!-- <div class="modules">
@@ -153,6 +191,7 @@
</el-col>
</el-row>
</div> -->
<!-- 推荐文章 -->
<div class="modules">
<!--内容块-->
@@ -313,7 +352,7 @@ export default {
list: []
},
caseList: {
num: 4,
num: 6,
orderType: 2,
list: []
},
@@ -426,6 +465,7 @@ export default {
let userIds = [];
res.result.forEach(item => {
item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null };
if (item.authorId && item.authorId != '') {
userIds.push(item.authorId);
}
@@ -579,6 +619,58 @@ export default {
</script>
<style scoped lang="scss">
.three-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
-webkit-line-clamp: 3;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.casetwo{
width: 100%;
height: 220px;
margin-bottom:15px;
position: relative;
background-color: #fff;
.case-top{
height: 70px;
background-image: linear-gradient(to right , #b8c7e2, #d0dcf3);
}
.case-conent{
width: 220px;
height: 160px;
box-shadow: 1px 1px 15px #ccc;
position: absolute;
top: 5%;
background-color: #fff;
left: 4%;
padding: 10px;
.case-time{
font-size: 10px;
color: #b1b1b1;
text-align: right;
}
.case-title{
font-size: 14px;
color: #333;
font-weight: bold;
margin-bottom:10px;
}
.case-text{
font-size: 14px;
color: #888888;
line-height: 18px;
margin-bottom:12px;
}
.case-inter{
position: absolute;
bottom: 5%;
}
}
}
// .qa-dai{
// color: #5da1ff;
// }

88
src/views/portal/case/Index.vue
View File

@@ -34,11 +34,12 @@
<span class="item-line"></span>
</div>
<div>
<el-radio-group v-model="category" size="mini" @change="search()">
<el-radio-group v-model="category" size="mini" @change="search()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button label="1">显示事业</el-radio-button>
<el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
<!-- <el-radio-button label="1">显示事业</el-radio-button>
<el-radio-button label="2">传感器事业</el-radio-button>
<el-radio-button label="3">智慧医工事业</el-radio-button>
<el-radio-button label="3">智慧医工事业</el-radio-button> -->
</el-radio-group>
</div>
@@ -58,13 +59,14 @@
<div>
<el-radio-group v-model="type2" size="mini" @change="search()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button label="1">经营</el-radio-button>
<el-radio-button v-for="item in Profess" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
<!-- <el-radio-button label="1">经营</el-radio-button>
<el-radio-button label="2">领用</el-radio-button>
<el-radio-button label="3">研发</el-radio-button>
<el-radio-button label="4">营销</el-radio-button>
<el-radio-button label="5">生产技术</el-radio-button>
<el-radio-button label="6">信息技术</el-radio-button>
<el-radio-button label="7">质量</el-radio-button>
<el-radio-button label="7">质量</el-radio-button> -->
</el-radio-group>
</div>
</div>
@@ -155,16 +157,18 @@
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
</el-col>
<el-col class="center" :span="18">{{item.sysCreateUname}}</el-col>
<!-- <el-col class="center" :span="7">{{''}}</el-col>
<el-col class="center" :span="7">{{item.counts}}</el-col> -->
</el-row>
</div>
</el-card>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
</el-tooltip>
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
</div>
</el-card>
</div>
</div>
</div>
<el-row :gutter="10">
</el-row>
<div style="height: 50px;"></div>
@@ -198,6 +202,7 @@ import author from '@/components/Portal/authorInfo.vue';
import apiCase from '@/api/modules/cases.js';
import apiUser from '@/api/system/user.js';
import apiSearchterm from "@/api/modules/searchterm.js";
import apiDict from "@/api/modules/dict.js"
export default {
name: 'index',
components: { portalHeader, portalFooter, portalFloatTools, interactBar,timeShow ,author},
@@ -219,6 +224,12 @@ export default {
list:[]
},
ankingList:[],
Popularity:[],
Positive:[],
domain:[],
Profess:[],
optionsList: [], //分类数据
protocolDialogVisible: false,
protocolConfirmButton:true,
queryCondition:{
@@ -243,8 +254,12 @@ export default {
this.protocolDialogVisible = true;
}
this.keyWord = this.$route.query.keyword;
this.getAnkingData()
this.searchterm()
this.getAnkingData();
this.getPopularity();
this.searchterm();
this.getPositive();
this.getProfess();
this.getdomain();
this.getCaseData();
window.addEventListener(
"scroll",
@@ -264,6 +279,24 @@ export default {
window.removeEventListener("scroll",this.handleScroll);
},
methods: {
getdomain(){
let key ='org_domain'
apiDict.items(key).then(res =>{
if(res.status==200){
// console.log(res)
this.domain = res.result
}
})
},
getProfess(){
let key ='major_type'
apiDict.items(key).then(res =>{
if(res.status==200){
console.log(res)
this.Profess = res.result
}
})
},
emitInput(val) {
this.keyWord=val;
this.search()
@@ -382,6 +415,29 @@ export default {
this.ankingList=res.result
}
})
},
getPopularity(){
apiCase.queryPraises(5).then(res=>{
if(res.status==200){
this.Popularity=res.result
}
})
},
getPositive(){
apiCase.queryComments(5).then(res=>{
if(res.status==200){
this.Positive=res.result
}
})
},
jumpRouter(item){
this.$router.push(`/case/detail?id=${item.id}`);
}
}
};

2
vue.config.js
View File

@@ -113,7 +113,7 @@ module.exports = {
proxy: {
'/systemapi': {
// 目标代理服务器地址
target: 'http://127.0.0.1:9090',
target: 'http://192.168.0.10:9090',
changeOrigin: true,
logLevel:'debug',
secure: false,