Skip to content

C
court-inner
Commit 14754135 by zlr
Options

改版

parent faac5288
Showing with 4026 additions and 453 deletions
src/main.js
......@@ -11,6 +11,7 @@ import router from "./router/routers";
import "./assets/style/index.scss";
import "./assets/style/kui.scss";
import scroll from 'vue-seamless-scroll'
Vue.config.productionTip = false;
......@@ -18,6 +19,9 @@ Vue.use(ElementUI, {
size: "small", // set element-ui default size
});
Vue.use(scroll)
new Vue({
router,
store,
......
src/router/routers.js
......@@ -169,6 +169,18 @@ const constantRouterMap = [
meta: { title: '法院新闻', icon: '' },
component: resolve => require(["@/views/news"], resolve),
},
{
path: "/list",
name: 'list',
meta: { title: '工作信息', icon: '' },
component: resolve => require(["@/views/list"], resolve),
},
{
path: "/detail",
name: 'detail',
meta: { title: '详情', icon: '' },
component: resolve => require(["@/views/detail"], resolve),
},
// {
// path: "/homePage",
// name: 'homePage',
......
src/views/detail/index.vue 0 → 100644
<template>
<div >
<el-row >
<el-col :span="18" :offset="3">
<el-row class="mt-20" :gutter="20">
<el-col :span="16">
<div class="zone-style">
<div style="min-height:76vh;">
<div style="">
<span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<!--下载附件-->
<el-row class="mt-15" :gutter="20" style="border-top:1px solid #ccc;padding:35px 0;">
<el-col >
<el-row :gutter="40">
<el-col class="mb-10" :span="12">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div class="file-name">namehghjsd结果来看和可管理回馈老顾客</div>
</div>
</el-col>
<el-col class="mb-10" :span="12">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div class="file-name">namehghjsd结果来看和可管理回馈老顾客</div>
</div>
</el-col>
<el-col class="mb-10" :span="12">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div class="file-name">namehghjsd结果来看和可管理回馈老顾客</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<!--评论-->
<el-row>
<h5 style="text-align:center;">暂无评论</h5>
<el-input type="textarea" :rows="10" placeholder="发表评论"></el-input>
<div style="text-align:center;font-size:14px;margin-top:15px;">
您必须先的<span style="color:#D33237;">登录</span>才能发表评论
</div>
</el-row>
</div>
</el-col>
<el-col :span="8">
<div class="zone-style">
<div class="k-flex-between-center">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div>精彩回顾</div>
</div>
<div style="font-size:12px;color: #999999;">
<span>MORE></span>
</div>
</div>
<div class="mt-10 mb-5 k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div class="gonggao-text">
<span >教育整顿进行时</span>
<span>鹿心社与自治区级政法机关领导班子成立交付给来访登记过了多久</span>
</div>
</div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list">
<div class="article-name">
<span class="right-line">
我为群众办实事
<span class="line-div"></span>
</span>
<span >{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</div>
<div class="mt-15 zone-style">
<div class="mb-15 btns-switch">
<el-button @click.native="switchBtn(0)" :class="['btn-item',{'sanjiao':activeItem==0}]">本月阅读排行</el-button>
<el-button @click.native="switchBtn(1)" :class="['btn-item',{'sanjiao':activeItem==1}]">评论排行</el-button>
</div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list">
<div class="article-name">
<span class="num" style="">{{index+1}}</span>
<span class="right-line">
我为群众办实事
<span class="line-div"></span>
</span>
<span >{{item.name}}</span>
</div>
<!--<div>{{item.date}}</div>-->
</div>
</div>
</el-col>
</el-row>
<!--<el-row class="top-info" style="">
<span class="fist-text" style="">工</span>
<span>作信息</span>
<div style="float:right;">
<span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="list-container" style="">
<div class="list-title" style="">按分类查看</div>
<ul class="type-list">
<li><a href="#">最高法通报</a></li>
<li><a href="#">最高人民法院简报</a></li>
</ul>
</div>
</el-col>
<el-col :span="16">
<div style="min-height:76vh;">
<el-table
:header-cell-style="{'text-align':'center','font-size':'13px','color':'black'}"
:cell-style="{'font-size':'13px','border-bottom':'none'}"
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
property="address"
label="标题">
</el-table-column>
<el-table-column
align="center"
property="date"
label="时间"
width="150">
</el-table-column>
<el-table-column
align="center"
property="name"
label="点击"
width="120">
</el-table-column>
<el-table-column
align="center"
property="name"
label="评论"
width="50">
</el-table-column>
</el-table>
<div style="margin-top:10px;">
<el-pagination
prev-text="上一页"
next-text="下一页"
layout="total,sizes,prev, pager, next,jumper"
:total="1000"
page-sizes=""
page-size="15"
current-page="1"
@current-change=""
@size-change=""
/>
</div>
</div>
</el-col>
</el-row>-->
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "show",
data() {
return {
activeItem:0,
topList:[
{
name:'开展司法教助全集中发放活动尽量克服冠军费德勒冠军费德勒空军航空发货过来会考虑好看',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
],
tableData: [{
date: '2016-05-02 12:00:00',
name: '24',
address: '【广西高院队...】广西高院队伍整顿简报'
}, {
date: '2016-05-04 12:00:00',
name: '45',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01 12:00:00',
name: '67',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03 12:00:00',
name: '89',
address: '上海市普陀区金沙江路 1516 弄'
}],
}
},
created() {
},
methods:{
switchBtn(i){
console.log('111===', i)
this.activeItem=i;
},
}
}
</script>
<style lang="scss" scoped>
// 切换气泡按钮
.btns-switch .btn-item{
display:inline-block;
text-align:center;
border: 1px solid #ff756d;
border-radius: 5px;
color:#ff756d;
}
.btns-switch .sanjiao{
background:#D33237;
color:#fff;
position:relative;
}
.sanjiao:after {
position: absolute;
display: inline-block;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #D33237;
left:30px;
bottom: -8px;
content: '';
}
.zone-style{
background-color:#fff;
padding:15px 15px;
border-radius:5px;
box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05);
}
.top-list{
padding:5px 0;
font-size:10px;
// color:#999999;
color:black;
}
.top-list .article-name{
width:85%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#999999;
}
.file-name{
font-size:14px;
}
.top-list:hover{
color:red;
}
.top-list:hover .article-name{
color:red;
}
.top-list .num{
// background:#D33237;
background:#CCCCCC;
color:#fff;
padding:0 5px;
border-radius:2px;
}
.top-list:hover .num{
background:#D33237;
}
.top-list .article-name .right-line{
padding-right:2px;
// border-right:2px solid black;
margin-right:5px;
position:relative;
color:black;
}
.top-list:hover .right-line{
color:red ;
}
.line-div{
position:absolute;
right:0;
top:0;
height:30px;
width:2px;
background:black;
}
// 公告
.gong-icon{
width:13px;
height:13px;
}
.gonggao-text{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FF756D;
font-family: PingFang SC, PingFang SC-Medium;
font-size:13px;
}
.top-info{
margin:15px 0;
border-bottom:2px solid #34bab2;
padding-bottom:15px;
}
.fist-text{
display:inline-block;
width:26px;
height:26px;
line-height:26px;
text-align:center;
font-size:15px;
color:#fff;
border-radius:50%;
background:#1a3784;
margin-right:3px;
}
.list-container{
border:2px solid #34bab2;
padding:15px 15px;
margin-top:40px;
}
.list-title{
border-bottom:1px dashed #ccc;
line-height: 35px;
}
// 列表start
.type-list li{
list-style-type: square;
// color: #0099ff;
color: blue;
font-size: 16px;
line-height: 35px;
border-bottom: 1px dashed #ccc;
}
.type-list li a{
color: #333;
font-size: 14px;
text-decoration:none;
}
.type-list li:hover{
// color: #ff6900;
color: red;
}
.type-list li:hover a{
// color: #ff6900
color:red;
}
.type-list li:last-of-type{border-bottom:none;}
// 列表end
ul{
margin: 0px;
padding: 0px;
padding-left: 15px;
}
</style>
\ No newline at end of file
src/views/home.vue
......@@ -2,37 +2,41 @@
<div class="page">
<!--<el-header class="border-bt">-->
<!-- 顶部标题工具栏 -->
<el-row :gutter="4" class="top-content">
<el-col :span="9" class="top-title">
<img :src="require('../assets/iconImg/01-首页/logo.png')" alt="" />
<div class="title-txt">广西法院内部信息网</div>
<!--&ensp;|&ensp;-->
<!--<div class="title-txt">会议管理模块</div>-->
</el-col>
<el-col :span="10">
<div class="center-txt">
法院：{{ userInfo.courtCode }}&ensp;部门：{{ userInfo.dept?userInfo.dept.name:'' }}&ensp;姓名：{{ userInfo.nickName }}
</div>
</el-col>
<el-col :span="5" class="top-btn">
<div class="top-btn-item">
<img
:src="require('../assets/iconImg/01-首页/使用手册.png')"
alt=""
/>
<div class="top-btn-item-text">使用手册</div>
</div>
<div class="top-btn-item">
<img
:src="require('../assets/iconImg/01-首页/系统设置.png')"
alt=""
/>
<div class="top-btn-item-text">系统设置</div>
</div>
<div @click="loginOut" class="top-btn-item" >
<img :src="require('../assets/iconImg/01-首页/退出.png')" alt="" />
<div class="top-btn-item-text">退出</div>
</div>
<el-row >
<el-col class="" :span="18" :offset="3">
<el-row :gutter="4" class="top-content">
<el-col :span="9" class="top-title">
<img :src="require('../assets/iconImg/01-首页/logo.png')" alt="" />
<div class="title-txt">广西法院内部信息网</div>
<!--&ensp;|&ensp;-->
<!--<div class="title-txt">会议管理模块</div>-->
</el-col>
<el-col :span="10">
<div class="center-txt">
法院：{{ userInfo.courtCode }}&ensp;部门：{{ userInfo.dept?userInfo.dept.name:'' }}&ensp;姓名：{{ userInfo.nickName }}
</div>
</el-col>
<el-col :span="5" class="top-btn">
<div class="top-btn-item">
<img
:src="require('../assets/iconImg/01-首页/使用手册.png')"
alt=""
/>
<div class="top-btn-item-text">使用手册</div>
</div>
<div class="top-btn-item">
<img
:src="require('../assets/iconImg/01-首页/系统设置.png')"
alt=""
/>
<div class="top-btn-item-text">系统设置</div>
</div>
<div @click="loginOut" class="top-btn-item" >
<img :src="require('../assets/iconImg/01-首页/退出.png')" alt="" />
<div class="top-btn-item-text">退出</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<!--</el-header>-->
......@@ -44,13 +48,16 @@
<router-view />
</el-main>
</el-container>
<el-footer>
<el-row>
<span>电话：0771-5788527 0771-5788292 0771-5788394</span>
</el-row>
<el-row>
<span>Copyright 2015 by chinacourt.org All Rights Reserved</span>
</el-row>
<div class="foot-div">
<el-row>
<span>电话：0771-5788527 0771-5788292 0771-5788394</span>
</el-row>
<el-row>
<span>Copyright 2015 by chinacourt.org All Rights Reserved</span>
</el-row>
</div>
</el-footer>
</div>
</template>
......@@ -98,7 +105,7 @@ export default {
<style lang="scss" scoped>
.page {
// background-color: #161616;
background-color:#FFFCDF;
width: 100%;
height: 100%;
// height: 100vh;
......@@ -162,11 +169,14 @@ export default {
.el-footer {
margin-top: 20px;
border-top: 3px solid #126ae6;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #ccc;
// padding: 25px 10px;
// padding-bottom: 10px;
width: 100%;
background-color: rgba(0, 120, 255, 0.15);
// background-color: rgba(0, 120, 255, 0.15);
text-align:center;
}
.foot-div{
padding: 25px 10px;
}
</style>
src/views/homePage/index.vue
<template>
<div >
<!--<div class="search-container">
<div class="index-div">
<div class="indexConFind k-flex k-center k-align-center">
<div class="k-flex seach-input">
<el-input
placeholder="请输入内容"
v-model="input"
clearable>
</el-input>
<el-button type="warning" icon="el-icon-search">搜索</el-button>
</div>
</div>
</div>
</div>-->
<!--<el-carousel :interval="4000" type="card" height="400px" indicator-position="outside">
<el-carousel-item v-for="item in imagesBox" :key="item.id">
<img :src="item.idView" class="image">
</el-carousel-item>
</el-carousel>-->
<el-row >
<el-col :span="14" :offset="5">
<!--模块1-->
<el-row :gutter="30">
<el-col :span="11">
<div style="margin-top:40px;">
<el-carousel height="250px" indicator-position="outside" :interval="4000">
<el-carousel-item v-for="item in imagesBox" :key="item.id">
<div class="carousel-div" style="">
<el-col :span="18" :offset="3">
<!--第一栏开始-->
<el-row :gutter="20" class="mt-15 first-zone-style">
<el-col :span="10" style="padding-left:0;padding-right:0;">
<div >
<el-carousel style="border-radius:8px;" height="250px" indicator-position="outside" :interval="4000">
<el-carousel-item style="border-radius:8px;" v-for="item in imagesBox" :key="item.id">
<div class="carousel-div" style="border-radius:8px;">
<el-image :src="item.idView" style="width:100%;height:100%;"></el-image>
<div class="carousel-intro" style="">
南宁中院：市首个族老矛盾调处中心成立
......@@ -39,72 +20,106 @@
</el-carousel>
</div>
</el-col>
<el-col :span="13">
<div class="top-info">
<span class="fist-text" style="">今</span>
<span>日头条</span>
<div style="float:right;">
<span>more>></span>
<el-col :span="10" style="">
<div class="zone-style">
<div class="k-flex-between-center">
<!--<span class="fist-text" style="">今</span>
<span>日头条</span>-->
<div class="btns-switch">
<el-button @click.native="switchBtn(0)" :class="['btn-item',{'sanjiao':activeItem==0}]">今日头条</el-button>
<el-button @click.native="switchBtn(1)" :class="['btn-item',{'sanjiao':activeItem==1}]">工作信息</el-button>
</div>
<div style="font-size:12px;color: #999999;">
<span>MORE></span>
</div>
</div>
</div>
<div class="top-line">
<span class="right-line">教育整顿进行时</span>
<span>鹿心社与自治区级政法机关领导班子成立</span>
</div>
<div class="k-flex k-space-between top-list">
<div>
<i class="el-icon-caret-right" style="color:red;margin-right:5px;"></i>
<span class="right-line">我为群众办实事</span>
<span>来宾法院：开展司法教助全集中发放活动</span>
<!--今日头条开始-->
<div v-if="activeItem==0">
<div class="mt-10 mb-5 k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div class="gonggao-text">
<span >教育整顿进行时</span>
<span>鹿心社与自治区级政法机关领导班子成立交付给来访登记过了多久</span>
</div>
</div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list">
<div class="article-name">
<span class="right-line">我为群众办实事</span>
<span >{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</div>
<div>09-23</div>
</div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list">
<div>
<i class="el-icon-caret-right" style="color:red;margin-right:5px;"></i>
<span class="right-line">我为群众办实事</span>
<span>{{item.name}}</span>
<!--今日头条结束-->
<!--工作信息开始-->
<div v-if="activeItem==1" class="mt-15">
<el-row :gutter="20">
<el-col :span="8" style="">
<div class="work-tab-list">
<div class="tab-item">
全&ensp;&ensp;&ensp;&ensp;部
</div>
<div class="tab-item">
桂高法通报
</div>
<div class="tab-item">
最高人民法院简报
</div>
<div class="tab-item">
广西高院简报<br/>信息专报
</div>
<div class="tab-item">
广西高院队伍<br/>教育整顿简报和动态
</div>
<div class="tab-item">
最高人民法院队伍<br/>教育整顿工作简报
</div>
</div>
</el-col >
<el-col :span="16" style="">
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between work-top-list">
<div class="article-name" style="">
<span >{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</el-col >
</el-row>
</div>
<div>{{item.date}}</div>
<!--工作信息结束-->
</div>
</el-col>
<el-col :span="4" style="background:#fff;box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05); ">
<div class="partnerInfo">
<ul class="ul-list">
<li v-for="(item,index) in headlist" :key="index" class="k-flex k-align-center" >
<img class="mr-5" :src="item.icon"></img>
<div>
<div style="font-size:14px;">{{ item.name }}</div>
<div style="font-size:5px;">{{ item.nickName }}</div>
</div>
</li>
</ul>
</div>
</el-col>
</el-row>
<!--模块1结束-->
<el-row class="button-list">
<el-button icon="el-icon-message">综合门户</el-button>
<el-button icon="el-icon-message">公文汇总</el-button>
<el-button icon="el-icon-message">法律总库</el-button>
<el-button icon="el-icon-message">法律法规</el-button>
<el-button icon="el-icon-message">数据集中</el-button>
<el-button icon="el-icon-message">即时通讯</el-button>
<el-button icon="el-icon-message">办公系统</el-button>
<el-button icon="el-icon-message">公文处理</el-button>
</el-row>
<!--第一栏结束-->
<el-row class="button-list">
<el-button icon="el-icon-message">内部邮件</el-button>
<el-button icon="el-icon-message">院务公告</el-button>
<el-button icon="el-icon-message">手机短信</el-button>
<el-button icon="el-icon-message">工作流程</el-button>
<el-button icon="el-icon-message">文书签章</el-button>
<el-button icon="el-icon-message">人员查询</el-button>
<el-button icon="el-icon-message">科技法庭</el-button>
<el-button icon="el-icon-message">通讯录</el-button>
</el-row>
<el-row class="button-list">
<el-button icon="el-icon-message">文书上网</el-button>
<el-button icon="el-icon-message">图书馆</el-button>
<el-button icon="el-icon-message">执行文书</el-button>
<el-button icon="el-icon-message">人民法院内网</el-button>
<el-button icon="el-icon-message">智能报表</el-button>
<el-button icon="el-icon-message">移动微学苑</el-button>
<!--第二栏按钮列表开始-->
<el-row class="mt-15 out-zone-style" :gutter="10" >
<el-col class="mb-10" :span="3" v-for="(item,index) in btnsList" :key="index">
<el-button>
<img class="mr-5 gong-icon" style="" :src="item.icon"></img>
{{item.name}}
</el-button>
</el-col>
</el-row>
<!--第二栏按钮列表结束-->
<!--模块2-->
<el-row >
<!--<el-row >
<div class="top-info">
<span class="fist-text" style="">工</span>
<span>作信息</span>
......@@ -179,10 +194,10 @@
</div>
</el-button>
</el-col>
</el-row>
</el-row>-->
<!--模块3-->
<el-row >
<!--<el-row >
<div class="top-info">
<span class="fist-text" style="">法</span>
<span>院业务</span>
......@@ -194,8 +209,7 @@
<el-row :gutter="5">
<el-col :span="7">
<div style="height:250px;overflow-y:auto;">
<!--开始-->
<!--<div class="left-box">
<div class="left-box">
<div class="collect-box">
<div class="collect" :style="{ 'margin-right': '15px' }">
<img
......@@ -238,7 +252,7 @@
</div>
</div>
</div>
</div>-->
</div>
<div class="left-box">
<div
class="meeting-item"
......@@ -283,7 +297,7 @@
<span>{{ item1.name }}年会议列表</span>
</div>
</div>
<!--子目录start-->
<div class="file-container">
<div
class="file-box"
......@@ -311,11 +325,8 @@
</el-collapse-transition>
</div>
</div>
<!-- 子目录end -->
</div>
</div>
<!--结束-->
</div>
</el-col>
<el-col :span="9">
......@@ -337,10 +348,270 @@
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>-->
<!--第三栏法院业务开始-->
<el-row class="mt-15 out-zone-style" :gutter="20" >
<el-col :span="13">
<div class="k-flex-between-center">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div>法院业务</div>
</div>
<div style="font-size:12px;color: #999999;">
<span>MORE></span>
</div>
</div>
<el-row class="mt-10" :gutter="20">
<el-col :span="7" style="background: #fafafa;padding:15px;">
<div style="height:250px;overflow-y:auto;">
<div class="tree-search mb-15">
<el-input
placeholder="请输入内容"
clearable>
<i @click="searchEvent" slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<el-tree :data="dataTreeFile" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<!--开始-->
<!--<div class="left-box">
<div
class="meeting-item"
v-for="(item1,index1) in treeData"
:key="index1"
@click="showHide(index1)"
>
<div class="collect-box" @click="showHide(index1)">
<div class="collect" :style="{ 'margin-right': '15px' }">
<img
:src="
require('../../assets/iconImg/11-会议总览/列表展开图标.png')
"
alt=""
v-if="item1.openFlag"
@click="changeFlag(index1)"
class="collect"
/>
<img
:src="
require('../../assets/iconImg/11-会议总览/列表未展开图标.png')
"
alt=""
v-if="!item1.openFlag"
@click="changeFlag(index1)"
class="collect"
/>
</div>
<div class="file-title">
<img
:src="
require('../../assets/iconImg/11-会议总览/文件展开.png')
"
alt=""
v-if="item1.openFlag"
/>
<img
:src="require('../../assets/iconImg/11-会议总览/文件夹.png')"
alt=""
v-if="!item1.openFlag"
/>
<span>{{ item1.name }}年会议列表</span>
</div>
</div>
<div class="file-container">
<div
class="file-box"
:class="item1.openFlag ? 'file-show' : 'file-hide'"
>
<el-collapse-transition>
<div v-if="item1.openFlag">
<div
class="file-item"
v-for="(item2, index2) in item1.childs"
:key="index2"
>
<div class="line-row"></div>
<div @click="showMeetingInfo(item2)" class="item-box">
<img
:src="
require('../../assets/iconImg/11-会议总览/月份图标.png')
"
alt=""
/>
<div>{{ item2.month }}月&ensp;({{ item2.number }})</div>
</div>
</div>
</div>
</el-collapse-transition>
</div>
</div>
</div>
</div>-->
<!--结束-->
</div>
</el-col>
<el-col :span="17">
<ul class="business-ul">
<li v-for="(item,index) in tableData" :key="index">
<span>【</span>
<span>过分过分的话</span>
<span>】</span>
<span>{{item.address}}</span>
</li>
</ul>
</el-col>
</el-row>
</el-col>
<el-col :span="11">
<el-carousel style="border-radius:8px;" height="250px" indicator-position="outside" :interval="4000">
<el-carousel-item style="border-radius:8px;" v-for="item in imagesBox" :key="item.id">
<div class="carousel-div" style="border-radius:8px;" >
<el-image :src="item.idView" style="width:100%;height:100%;"></el-image>
<div class="carousel-intro" style="">
南宁中院：市首个族老矛盾调处中心成立
</div>
</div>
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
<!--第三栏法院业务结束-->
<!--第四栏干警作品开始-->
<el-row class="mt-15" :gutter="20">
<el-col :span="14" >
<div class="zone-style">
<div class="k-flex-between-center">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div>干警作品</div>
</div>
<div style="font-size:12px;color: #999999;">
<span>MORE></span>
</div>
</div>
<el-row class="mt-15" :gutter="20">
<!--<el-col :span="8"></el-col>
<el-col :span="8"></el-col>
<el-col :span="8"></el-col>-->
<el-col style="border-radius:5px;" :span="8" v-for="item in imagesBox" :key="item.id">
<div class="imgs-div" style="width:100%;border-radius:8px;" >
<el-image :src="item.idView" style="width:100%;display:block;border-radius:5px;">
</el-image>
<div class="imgs-intro" style="width:100%;border-radius:0 0 5px 5px;">
<span>&ensp;南宁中院：市首个族老矛盾调处中心成立&ensp;</span>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="10">
<div class="zone-style">
<div class="k-flex-between-center">
<div class="btns-switch">
<el-button @click.native="switchBtnPolice(0)" :class="['btn-item',{'sanjiao':activeItemPolice==0}]">视频点播</el-button>
<el-button @click.native="switchBtnPolice(1)" :class="['btn-item',{'sanjiao':activeItemPolice==1}]">全区速递</el-button>
</div>
<div style="font-size:12px;color: #999999;">
<span>MORE></span>
</div>
</div>
<!--今日头条开始-->
<div class="mt-15" v-if="activeItemPolice==0">
<!--<div class="mt-10 mb-5 k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div class="gonggao-text">
<span >教育整顿进行时</span>
<span>鹿心社与自治区级政法机关领导班子成立交付给来访登记过了多久</span>
</div>
</div>-->
<div v-for="(item,index) in topList2" :key="'info2-'+index" class=" k-flex k-space-between top-list">
<div class="article-name">
<!--<span class="right-line">我为群众办实事</span>-->
<span >{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</div>
<!--今日头条结束-->
<!--工作信息开始-->
<!--<div v-if="activeItemPolice==1" class="mt-15">
<el-row :gutter="20">
<el-col :span="8" style="">
<div class="work-tab-list">
<div class="tab-item">
全&ensp;&ensp;&ensp;&ensp;部
</div>
<div class="tab-item">
桂高法通报
</div>
<div class="tab-item">
最高人民法院简报
</div>
<div class="tab-item">
广西高院简报<br/>信息专报
</div>
<div class="tab-item">
广西高院队伍<br/>教育整顿简报和动态
</div>
<div class="tab-item">
最高人民法院队伍<br/>教育整顿工作简报
</div>
</div>
</el-col >
<el-col :span="16" style="">
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between work-top-list">
<div class="article-name" style="">
<span >{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</el-col >
</el-row>
</div>-->
<!--工作信息结束-->
</div>
</el-col>
</el-row >
<!--第四栏干警作品结束-->
<!--第五栏地区开始-->
<el-row class="mt-15" :gutter="20">
<el-col :span="22" :offset="1">
<el-row :gutter="20">
<el-col :span="4" >
<div class="k-flex k-center mt-10 info-tap">
<el-image style="width:35px;" :src="require('../../assets/home.png')"></el-image>
<div class="ml-10" style="font-weight:bold;font-size:15px;">
<div>
全国高院
</div>
<div style="text-align:right;">
网站群
</div>
</div>
<div class="line-div"></div>
</div>
</el-col>
<el-col :span="20">
<el-row :gutter="20">
<el-col style="text-align:center;" :span="2" v-for="(item,index) in placeList" :key="index">
<span style="font-size:10px;color:#444444;">{{item.name}}</span>
</el-col>
</el-row >
</el-col>
</el-row >
</el-col>
</el-row >
<!--第五栏地区结束-->
<!--模块4开始-->
<el-row >
<!--<el-row >
<div class="top-info">
<span class="fist-text" style="">干</span>
<span>警作品</span>
......@@ -354,7 +625,7 @@
<el-row :gutter="10">
<el-col :span="8" v-for="item in imagesBox" :key="item.id">
<div class="imgs-div" style="width:100%;">
<el-image :src="item.idView" :fit="fit" style="width:100%;display:block">
<el-image :src="item.idView" style="width:100%;display:block">
</el-image>
<div class="imgs-intro" style="width:100%;">
<span>&ensp;南宁中院：市首个族老矛盾调处中心成立&ensp;</span>
......@@ -363,7 +634,7 @@
</el-col>
<el-col :span="8" v-for="item in imagesBox" :key="item.id">
<div class="imgs-div" style="width:100%;">
<el-image :src="item.idView" :fit="fit" style="width:100%;display:block">
<el-image :src="item.idView" style="width:100%;display:block">
</el-image>
<div class="imgs-intro" style="width:100%;">
<span>&ensp;南宁中院：市首个族老矛盾调处中心成立&ensp;</span>
......@@ -374,19 +645,19 @@
</el-col>
<el-col :span="8">
<div v-if="index==2" v-for="(item,index) in imagesBox" :key="item.id" class="imgs-div" style="width:100%;">
<el-image :src="item.idView" :fit="fit" style="width:100%;display:block">
<el-image :src="item.idView" style="width:100%;display:block">
</el-image>
<div class="imgs-intro" style="width:100%;">
<span>&ensp;南宁中院：市首个族老矛盾调处中心成立&ensp;</span>
</div>
</div>
</el-col>
</el-row>
</el-row>-->
<!--模块4结束-->
<!--模块5开始-->
<el-row :gutter="20">
<!--<el-row :gutter="20">
<el-col :span="12">
<el-row >
<div class="top-info">
......@@ -429,14 +700,14 @@
</el-row>
</el-col>
</el-row>
</el-row>-->
<!--模块5结束-->
<!--模块6开始-->
<el-row class="group-list mt-15" :gutter="20">
<!--<el-row class="group-list mt-15" :gutter="20">
<el-col :span="5" style="border-right:2px solid red;">
<div class="k-flex k-center">
<el-image :fit="fit" style="width:35px;" :src="require('../../assets/home.png')"></el-image>
<el-image style="width:35px;" :src="require('../../assets/home.png')"></el-image>
<div style="font-weight:bold;font-size:15px;">
<div>
全国高院
......@@ -455,7 +726,7 @@
</el-row>
</el-col>
</el-row>
</el-row>-->
<!--模块6结束-->
</el-col>
......@@ -517,14 +788,147 @@
export default {
data() {
return {
imagesBox:[{id:0,idView:require("../../assets/pic.jpg")},
input:'',
activeItem:0,
activeItemPolice:0,
headlist:[
{
icon:require("../../assets/home/head/1.png"),
name:'绩效考评',
nickName:'Assessment'
},
{
icon:require("../../assets/home/head/1.png"),
name:'建党专栏',
nickName:'Special column'
},
{
icon:require("../../assets/home/head/1.png"),
name:'审判管理',
nickName:'Administer'
},
{
icon:require("../../assets/home/head/1.png"),
name:'论坛交流',
nickName:'Forum'
},
{
icon:require("../../assets/home/head/1.png"),
name:'案例与期刊',
nickName:'Case-Jourbal'
},
],
btnsList:[
{
icon:require("../../assets/home/head/1.png"),
name:'综合门户',
},
{
icon:require("../../assets/home/head/1.png"),
name:'公文汇总',
},
{
icon:require("../../assets/home/head/1.png"),
name:'法律总库',
},
{
icon:require("../../assets/home/head/1.png"),
name:'法律法规',
},
{
icon:require("../../assets/home/head/1.png"),
name:'数据集中',
},
{
icon:require("../../assets/home/head/1.png"),
name:'公文汇总',
},
{
icon:require("../../assets/home/head/1.png"),
name:'即时通讯',
},
{
icon:require("../../assets/home/head/1.png"),
name:'办公系统',
},
{
icon:require("../../assets/home/head/1.png"),
name:'公文处理',
},
{
icon:require("../../assets/home/head/1.png"),
name:'内部邮件',
},
{
icon:require("../../assets/home/head/1.png"),
name:'院务公告',
},
{
icon:require("../../assets/home/head/1.png"),
name:'手机短信',
},
{
icon:require("../../assets/home/head/1.png"),
name:'工作流程',
},
{
icon:require("../../assets/home/head/1.png"),
name:'文章简章',
},
{
icon:require("../../assets/home/head/1.png"),
name:'人员查询',
},
{
icon:require("../../assets/home/head/1.png"),
name:'科技法庭',
},
{
icon:require("../../assets/home/head/1.png"),
name:'通讯录',
},
{
icon:require("../../assets/home/head/1.png"),
name:'文书上网',
},
{
icon:require("../../assets/home/head/1.png"),
name:'图书馆',
},
{
icon:require("../../assets/home/head/1.png"),
name:'执行文书',
},
{
icon:require("../../assets/home/head/1.png"),
name:'人民法院内网',
},
{
icon:require("../../assets/home/head/1.png"),
name:'智能报表',
},
{
icon:require("../../assets/home/head/1.png"),
name:'移动微学苑',
},
],
imagesBox:[
{id:0,idView:require("../../assets/pic.jpg")},
{id:1,idView:require("../../assets/1.png")},
{id:2,idView:require("../../assets/2.png")},
{id:3,idView:require("../../assets/3.png")},
{id:0,idView:require("../../assets/pic.jpg")},
{id:1,idView:require("../../assets/1.png")},
{id:2,idView:require("../../assets/2.png")},
// {id:3,idView:require("../../assets/3.png")},
],
{id:3,idView:require("../../assets/3.png")},
],
fiveNews: [],
topList:[
{
name:'开展司法教助全集中发放活动尽量克服冠军费德勒冠军费德勒空军航空发货过来会考虑好看',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
......@@ -548,6 +952,32 @@ export default {
name:'开展司法教助全集中发放活动',
date:'09-23'
},
],
topList2:[
{
name:'开展司法教助全集中发放活动尽量克服冠军费德勒冠军费德勒空军航空发货过来会考虑好看',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
......@@ -556,11 +986,11 @@ export default {
tableData: [{
date: '2016-05-02 12:00:00',
name: '24',
address: '【广西高院队...】广西高院队伍整顿简报官方首发的广东话'
address: '【广西高院队就】广西高院队伍整顿简报官方首发的广东话合规合法的韩国和跟黑社会呵呵呵回复的环境'
}, {
date: '2016-05-04 12:00:00',
name: '45',
address: '上海市普陀区金沙江路 1517 弄还是个哈哈哈'
address: '上海市普陀区金沙江路 1517 弄还是个哈哈哈韩国发动机简洁大方'
}, {
date: '2016-05-01 12:00:00',
name: '67',
......@@ -717,6 +1147,81 @@ export default {
name:'黑龙江',
},
],
dataTreeFile: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
placeList:[
{name:'最高法'},
{name:'北京'},
{name:'天津'},
{name:'河北'},
{name:'山西'},
{name:'内蒙古'},
{name:'辽宁'},
{name:'吉林'},
{name:'黑龙江'},
{name:'上海'},
{name:'江苏'},
{name:'浙江'},
{name:'安徽'},
{name:'福建'},
{name:'江西'},
{name:'山东'},
{name:'河南'},
{name:'湖北'},
{name:'湖南'},
{name:'广东'},
{name:'广西'},
{name:'海南'},
{name:'重庆'},
{name:'四川'},
{name:'贵州'},
{name:'云南'},
{name:'西藏'},
{name:'陕西'},
{name:'甘肃'},
{name:'青海'},
{name:'宁夏'},
{name:'新疆'},
{name:'新疆兵团'},
]
}
......@@ -731,15 +1236,124 @@ export default {
this.treeData[i].openFlag=!this.treeData[i].openFlag;
this.$forceUpdate();//强制赋值
},
showMeetingInfo(){}
showMeetingInfo(){},
switchBtn(i){
console.log('111===', i)
this.activeItem=i;
},
switchBtnPolice(i){
console.log('2222===', i)
this.activeItemPolice=i;
},
searchEvent(){},
handleNodeClick(){},
},
}
</script>
<style lang="scss" scoped>
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
// 切换气泡按钮
.btns-switch .btn-item{
display:inline-block;
text-align:center;
border: 1px solid #ff756d;
border-radius: 5px;
color:#ff756d;
}
.btns-switch .sanjiao{
background:#D33237;
color:#fff;
position:relative;
}
.sanjiao:after {
position: absolute;
display: inline-block;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #D33237;
left:30px;
bottom: -8px;
content: '';
}
// 公告
.gong-icon{
width:13px;
height:13px;
}
.gonggao-text{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FF756D;
font-family: PingFang SC, PingFang SC-Medium;
font-size:13px;
}
.partnerInfo ul li {
list-style: none;
line-height: 1;
}
.ul-list li{
border-radius:5px;
background:#fff;
padding:10px 10px;
font-size:12px;
}
.ul-list li img{
width:30px;
height:30px;
}
.ul-list li:hover{
background:#D33237;
color:#fff;
}
// 按钮模块
.item-btns{
}
// 工作信息
.work-tab-list .tab-item:not(:nth-child(1)){
margin-top:5px;
}
.work-tab-list .tab-item{
padding:7px 0;
text-align:center;
background:#ccc;
cursor: pointer;
font-size:10px;
border-radius:5px;
color:#fff;
}
.work-tab-list .tab-item:hover{
background:red;
}
.work-top-list{
padding:5px 0;
font-size:10px;
}
.article-name{
width:85%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.search-container{
// position:relative;
width: 100%;
height: 500px;
background-image: url(../../assets/pic.jpg);
......@@ -827,10 +1441,12 @@ export default {
padding-right:2px;
border-right:2px solid black;
margin-right:5px;
color:black;
}
.top-list{
padding:5px 0;
font-size:10px;
color:#999999;
}
.left-tab-list .tab-item:not(:nth-child(1)){
margin-top:5px;
......@@ -880,29 +1496,36 @@ cursor: pointer;
// white-space:nowrap;
// overflow:hidden;
// text-overflow:ellipsis;
list-style:none;
margin:0;
padding:0;
}
.business-ul li{
width:100%;
font-size:13px;
}
.business-ul li .el-link{
display:inline-block;
text-decoration:none;
width:100%;
white-space:nowrap;
font-size:13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.business-ul li .el-link:hover {
text-decoration:none;
.business-ul li:hover {
color:red;
}
.business-ul li:hover .el-link{
text-decoration:none;
}
// .business-ul li .el-link{
// display:inline-block;
// text-decoration:none;
// width:100%;
// white-space:nowrap;
// overflow:hidden;
// text-overflow:ellipsis;
// }
// .business-ul li .el-link:hover {
// text-decoration:none;
// color:red;
// }
// .business-ul li:hover .el-link{
// text-decoration:none;
// }
.business-ul li+li{
margin-top:5px;
}
......@@ -1088,4 +1711,85 @@ cursor: pointer;
font-size:12px;
margin-bottom:10px;
}
// 树形菜单图标start-----------------------
.el-tree /deep/ .el-tree-node__expand-icon.expanded
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/*//有子节点 且未展开*/
.el-tree /deep/ .el-icon-caret-right:before
{
background: url("../../assets/wjjg.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*//有子节点 且已展开*/
.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
background: url("../../assets/wjjk.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*//没有子节点*/
.el-tree /deep/ .el-tree-node__expand-icon.is-leaf::before
{
background: url("../../assets/wj.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
// 树形菜单图标end-----------------------
::v-deep{
.tree-search{
margin:0 15px;
.el-input__inner{
height:30px;
line-height:30px;
}
}
}
.zone-style{
background-color:#fff;
padding:15px 15px;
border-radius:5px;
box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05);
}
.out-zone-style{
background-color:#fff;
margin-left:0!important;
margin-right:0!important;
padding:15px;
border-radius:5px;
box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05);
}
.first-zone-style{
margin-left:0!important;
margin-right:0!important;
// padding:15px;
}
.info-tap{
position:relative;
}
.line-div{
width: 1px;
height: 30px;
background: #ccc;
position: absolute;
right: -1px;
top: 10px;
}
</style>
src/views/layout/menu.vue
......@@ -15,80 +15,94 @@
</li>
</ul>
</div>
</div>:default-active="this.$router.path"-->
<el-row class="my-menu k-flex k-center k-align-center">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
active-text-color="#ffd04b"
:collapse="true"
router>
<el-menu-item index="/homePage">首页</el-menu-item>
<el-menu-item index="/news" >法院新闻00</el-menu-item>
<el-submenu index="" >
<template slot="title">法院新闻</template>
<el-menu-item index="">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</div>:default-active="this.$router.path" @select="handleSelect"-->
<el-row >
<!--<el-col class="my-menu k-flex k-center k-align-center" :span="18" :offset="3">-->
<el-col class="my-menu k-flex-between-center" :span="18" :offset="3">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
active-text-color="#ffd04b"
background-color="#D33237"
text-color="#fff"
router>
<el-menu-item index="/homePage">首页</el-menu-item>
<el-menu-item index="/news" >法院新闻00</el-menu-item>
<el-submenu index="2" >
<template slot="title" @click="toNews('/news')">法院新闻</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
</el-submenu>
<el-submenu mode="horizontal" style="" index="3" id="myPopDown">
<template slot="title">工作信息</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
<el-submenu mode="horizontal" style="" index="list" id="myPopDown">
<template slot="title">工作信息</template>
<el-menu-item index="/list">选项1</el-menu-item>
<el-menu-item index="/detail">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">法院业务</template>
<el-menu-item index="4-1">选项1</el-menu-item>
<el-menu-item index="4-2">选项2</el-menu-item>
<el-menu-item index="4-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="5">
<template slot="title">干警作品</template>
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
<el-menu-item index="5-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="6">
<template slot="title">娱乐</template>
<el-menu-item index="6-1">选项1</el-menu-item>
<el-menu-item index="6-2">选项2</el-menu-item>
<el-menu-item index="6-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="7">
<template slot="title">全区法院</template>
<el-menu-item index="7-1">选项1</el-menu-item>
<el-menu-item index="7-2">选项2</el-menu-item>
<el-menu-item index="7-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="/show" >信息发布系统</el-menu-item>
<!--<el-menu-item index="4">
<a href="https://www.ele.me" target="_blank">订单管理</a>
订单管理
</el-menu-item>-->
<el-menu-item>
<div>
<div class="k-flex seach-input k-align-center">
<el-input
placeholder="请输入内容"
v-model="input"
clearable>
</el-input>
<el-button style="" type="warning" icon="el-icon-search">搜索</el-button>
</div>
</div>
</el-menu-item>
</el-menu>
<el-submenu index="4">
<template slot="title">法院业务</template>
<el-menu-item index="4-1">选项1</el-menu-item>
<el-menu-item index="4-2">选项2</el-menu-item>
<el-menu-item index="4-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="5">
<template slot="title">干警作品</template>
<el-menu-item index="5-1">选项1</el-menu-item>
<el-menu-item index="5-2">选项2</el-menu-item>
<el-menu-item index="5-3">选项3</el-menu-item>
</el-submenu>
<el-submenu index="/news">
<template slot="title">娱乐</template>
<!--<el-menu-item index="6-1">选项1</el-menu-item>
<el-menu-item index="6-2">选项2</el-menu-item>
<el-menu-item index="6-3">选项3</el-menu-item>-->
</el-submenu>
<el-submenu index="7">
<template slot="title">全区法院</template>
<el-menu-item index="7-1">选项1</el-menu-item>
<el-menu-item index="7-2">选项2</el-menu-item>
<el-menu-item index="7-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="/show" >信息发布系统</el-menu-item>
<!--<el-menu-item index="4">
<a href="https://www.ele.me" target="_blank">订单管理</a>
订单管理
</el-menu-item>-->
<!--<el-menu-item>
<div>
<div class="k-flex seach-input k-align-center">
<el-input
placeholder="请输入内容"
v-model="input"
clearable>
<i @click="searchEvent" slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-button style="" type="warning" icon="el-icon-search">搜索</el-button>
</div>
</div>
</el-menu-item>-->
</el-menu>
<div class="k-flex seach-input k-align-center">
<el-input
placeholder="请输入内容"
clearable>
<i @click="searchEvent" slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
<!--<el-button style="" type="warning" icon="el-icon-search">搜索</el-button>-->
</div>
</el-col>
<!--<div class="k-flex seach-input k-align-center">
<el-input
placeholder="请输入内容"
......@@ -98,6 +112,9 @@
<el-button type="warning" icon="el-icon-search">搜索</el-button>
</div>-->
</el-row>
</div>
</template>
<script>
......@@ -155,52 +172,71 @@ export default {
methods:{
selected(){},
menuselected(){},
searchEvent(){
console.log('搜索');
},
toNews(){
console.log(4556);
this.$router.push({ name: "news" });
}
}
}
</script>
<style lang="scss" scoped>
.my-menu{
background: linear-gradient(to right, #1a3784 0%,#34bab2 100%);
// background: linear-gradient(to right, #1a3784 0%,#34bab2 100%);
background:#D33237;
border-radius:7px;
padding:0 15px;
}
::v-deep{
ul{
padding:0;
margin:0;
}
.el-menu.el-menu--horizontal{
display:flex;
justify-content:center;
// background: linear-gradient(to right, #1a3784 0%,#34bab2 100%);
background:transparent;
border-bottom:none;
.el-menu{
border-radius:7px 0 0 7px;
}
.el-menu-item{
font-size:13px;
padding:0 15px;
}
.el-submenu__title{
padding:0 15px;
}
.el-menu--horizontal>.el-menu-item{
color:#fff;
.el-menu--horizontal>.el-submenu .el-submenu__title{
font-size:13px;
}
// ul{
// padding:0;
// margin:0;
// }
// .el-menu.el-menu--horizontal{
// display:flex;
// justify-content:center;
// background: linear-gradient(to right, #1a3784 0%,#34bab2 100%);
// background:transparent;
// border-bottom:none;
// }
// .el-menu--horizontal>.el-menu-item{
// color:#fff;
// }
// .el-menu--horizontal>.el-submenu .el-submenu__title{
// color:#fff;
// }
.el-menu-item:focus, .el-menu-item:hover{
background-color:transparent;
}
// .el-menu-item:focus, .el-menu-item:hover{
// background-color:transparent;
// }
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
background-color:transparent;
}
// .el-menu{
// display:flex;
// .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
// background-color:transparent;
// }
// .el-menu--popup{
// display:flex !important;
// .el-submenu{
// color:red;
// }
// .el-menu--horizontal{
// background: red;
// width: 100%;
// }
.el-submenu{
color:red;
}
.el-menu--horizontal{
background: red;
width: 100%;
}
// .el-menu--horizontal .el-submenu {
// float: left;
......@@ -249,6 +285,7 @@ position: static;
vertical-align: middle;
margin-left: 8px;
margin-top: -3px;
color:#fff;
}
.el-menu--horizontal .el-submenu.is-active .el-submenu__title {
......@@ -371,4 +408,6 @@ color: #303133;
// .seach-input{
// width:60%;
// }
</style>
src/views/list/index.vue 0 → 100644
<template>
<div >
<el-row >
<el-col :span="18" :offset="3">
<!--<el-row class="top-info" style="">
<span class="fist-text" style="">工</span>
<span>作信息</span>
<div style="float:right;">
<span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-row>-->
<el-row class="mt-20" :gutter="20">
<!--左边栏目开始-->
<el-col :span="5">
<div class="list-container" style="">
<div class="list-title mb-10" style="">按分类查看</div>
<!--<ul class="type-list">
<li><a href="#">最高法通报</a></li>
<li><a href="#">最高人民法院简报</a></li>
</ul>-->
<el-tree :data="dataTreeFile" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</div>
</el-col>
<!--左边栏目结束-->
<el-col :span="19">
<div class="zone-style">
<div style="min-height:76vh;">
<div style="">
<span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-table
:header-cell-style="{'text-align':'center','font-size':'15px','color':'black'}"
:cell-style="{'font-size':'13px','border-bottom':'none'}"
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
align="left"
property="address"
label="标题">
<template slot-scope="scope">
<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{scope.row.address}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
property="date"
label="时间"
width="150">
</el-table-column>
<el-table-column
align="center"
property="name"
label="点击"
width="120">
</el-table-column>
<el-table-column
align="center"
property="name"
label="评论"
width="50">
</el-table-column>
</el-table>
<div style="margin-top:10px;">
<el-pagination
prev-text="上一页"
next-text="下一页"
layout="total,sizes,prev, pager, next,jumper"
:total="1000"
page-sizes=""
page-size="15"
current-page="1"
@current-change=""
@size-change=""
/>
</div>
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "show",
data() {
return {
dataTreeFile: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
tableData: [{
date: '2016-05-02 12:00:00',
name: '24',
address: '【广西高院队...】广西高院队伍整顿简报解放军过来了就收到了开花结果的工具打开两个换个角度思考和监控工具打开换个角度来看回家国家的客户给几个大客户就'
}, {
date: '2016-05-04 12:00:00',
name: '45',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01 12:00:00',
name: '67',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03 12:00:00',
name: '89',
address: '上海市普陀区金沙江路 1516 弄'
}],
}
},
created() {
},
methods:{
}
}
</script>
<style lang="scss" scoped>
// 树形菜单图标start-----------------------
.el-tree{
background:transparent;
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/*//有子节点 且未展开*/
.el-tree /deep/ .el-icon-caret-right:before
{
background: url("../../assets/wjjg.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*//有子节点 且已展开*/
.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
background: url("../../assets/wjjk.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*//没有子节点*/
.el-tree /deep/ .el-tree-node__expand-icon.is-leaf::before
{
background: url("../../assets/wj.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
// 树形菜单图标end-----------------------
.top-info{
margin:15px 0;
border-bottom:2px solid #34bab2;
padding-bottom:15px;
}
.fist-text{
display:inline-block;
width:26px;
height:26px;
line-height:26px;
text-align:center;
font-size:15px;
color:#fff;
border-radius:50%;
background:#1a3784;
margin-right:3px;
}
.list-container{
// border:2px solid #34bab2;
// padding:15px 15px;
// margin-top:40px;
}
.list-title{
border-bottom:1px dashed #ccc;
line-height: 35px;
}
// 列表start
.type-list li{
list-style-type: square;
// color: #0099ff;
color: blue;
font-size: 16px;
line-height: 35px;
border-bottom: 1px dashed #ccc;
}
.type-list li a{
color: #333;
font-size: 14px;
text-decoration:none;
}
.type-list li:hover{
// color: #ff6900;
color: red;
}
.type-list li:hover a{
// color: #ff6900
color:red;
}
.type-list li:last-of-type{border-bottom:none;}
// 列表end
ul{
margin: 0px;
padding: 0px;
padding-left: 15px;
}
.zone-style{
background-color:#fff;
padding:15px 15px;
border-radius:5px;
box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05);
}
::v-deep{
.el-table th:first-child>.cell{
text-align:left!important;
}
}
</style>
\ No newline at end of file
src/views/news -old/index.vue 0 → 100644
<template>
<div>
<el-row>
<el-col :span="16" :offset="4">
<el-row class="top-info" style="">
<!--<span class="fist-text" style="">工</span>
<span>作信息</span>-->
<div >
<span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>法院新闻</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-carousel height="250px" indicator-position="outside" :interval="4000">
<el-carousel-item v-for="item in imagesBox" :key="item.id">
<div class="carousel-div" style="">
<el-image :src="item.idView" style="width:100%;height:100%;"></el-image>
<div class="carousel-intro" style="">
南宁中院：市首个族老矛盾调处中心成立
</div>
</div>
</el-carousel-item>
</el-carousel>
<el-row class="mb-20">
<div class="top-info-news">
<span>新闻类总排行</span>
</div>
<div class="type-div">
<el-button>今天</el-button>
<el-button>一周</el-button>
<el-button>一个月</el-button>
<ul class="left-business-ul" style="list-style:none;margin:0;">
<li v-for="(item,index) in tableData" :key="index">
<div class="k-flex k-center k-space-between">
<div class="name-txt" style="max-width:80%;">
<span class="mr-2" style="font-weight:bold;font-size:15px;font-style: italic">{{index+1}}</span>
{{item.address}}
</div>
<div>{{item.date}}</div>
</div>
</li>
</ul>
</div>
</el-row>
</el-col>
<el-col :span="8">
<el-row class="mb-20">
<div class="top-info-title">
<span>最新消息</span>
</div>
<ul class="business-ul">
<li v-for="(item,index) in tableData" :key="index">
<div class="k-flex k-center k-space-between">
<div class="name-txt" style="max-width:80%;">{{item.address}}</div>
<div>{{item.date}}</div>
</div>
</li>
</ul>
</el-row>
<el-row >
<div class="top-info-title">
<span>关注自己的法院</span>
</div>
<ul class="business-ul">
<li v-for="(item,index) in tableData" :key="index">
<div class="k-flex k-center k-space-between">
<div class="name-txt" style="max-width:80%;">{{item.address}}</div>
<div>{{item.date}}</div>
</div>
</li>
</ul>
</el-row>
</el-col>
<el-col :span="8">
<div class="mt-10 top-info-title" style="border-bottom:none;">
<span>精彩回顾</span>
</div>
<div class="mt-5" style="text-align:right;">
<el-button icon="el-icon-arrow-left" size="small"></el-button>
<el-button icon="el-icon-arrow-right" size="small"></el-button>
</div>
<el-row :gutter="10">
<el-col :span="12">
<el-image style="" :src="require('../../assets/pic.jpg')"></el-image>
</el-col :span="12">
<el-col :span="12">
<div>
结果立刻发动进攻类库的结构来看到付即可购房贷款逛街看到路上经过考虑工具开发架构框架
<span style="color:red;font-size:10px;">[详细]</span>
</div>
</el-col :span="12">
</el-row>
<ul class="business-ul">
<li v-for="(item,index) in tableData" :key="index">
<div class="k-flex k-center k-space-between">
<div class="name-txt" style="max-width:80%;">{{item.address}}</div>
<div>{{item.date}}</div>
</div>
</li>
</ul>
</el-col>
</el-row>
<el-row>
<div class="scroll-nav">
<ul class="scroll-imgs-list">
<li class="scroll-imgs-li" v-for="item in imagesBox" :key="item.id">
<el-image class="scroll-img" :src="item.idView" ></el-image>
</li>
<!--<li class="scroll-imgs-li" v-for="item in imagesBox" :key="item.id">
<el-image class="scroll-img" :src="item.idView" ></el-image>
</li>-->
</ul>
</div>
</el-row>
<!--<el-row>
<div class="back_add">
<div class="threeImg">
<div class="Containt">
<div class="iconleft" @click="zuohua">
<i class="el-icon-arrow-left"></i>
</div>
<ul :style="{'left':calleft + 'px'}" v-on:mouseover="stopmove()" v-on:mouseout="move()">
<li v-for="(item,index) in superurl" :key="index">
<img :src="item.img">
</li>
</ul>
<div class="iconright" @click="youhua">
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</el-row>-->
<!--<el-row class="project-case">
el-col :span="24" class="title">
<router-link to="/customerCase" tag="span">经典案例</router-link>
</el-col>
<div class="content">
<div
class="content-list"
ref="contentList"
@mousedown.prevent="contentListMouseDown"
>
<el-col
class="content-item"
:span="4"
v-for="(item, index) in dataList"
:key="index"
>
<router-link :to="item.path">
<el-image class="swip-img" @mousedown.prevent="" @click="routerLink(item)" :src="item.url" alt="" ></el-image>
</router-link>
</el-col>
</div>
</div>
</el-row>-->
<!--<vue-seamless-scroll style="border:1px solid red;margin-top:15px;" :data="dataList" :class-option="optionLeft" class="seamless-warp3">
<ul class="item">
<li v-for="item in newsList" v-text="item.title">
</li>
</ul>
<div class="scroll-nav">-->
<!--<ul class="item">
<li v-for="(item,index) in dataList" :key="index">
<el-image style="width:100%;height:100%;" :src="item.url"></el-image>
</li>
</ul>-->
<!--</div>
</vue-seamless-scroll>-->
<!--<vue-seamless-scroll :data="listData" class="seamless-warp">
<ul class="item">
<li v-for="item in listData">
<span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>-->
<div ref="itemWrapper" class="container" style="margin-top:15px;">
<div class="scroll-inline-container">
<div class="scroll-container">
<img src="http://lorempixel.com/200/300?key=1" />
<img src="http://lorempixel.com/200/300?key=2" />
<img src="http://lorempixel.com/200/300?key=3" />
<img src="http://lorempixel.com/200/300?key=4" />
<img src="http://lorempixel.com/200/300?key=5" />
</div>
<div class="scroll-container">
<img src="http://lorempixel.com/200/300?key=1" />
<img src="http://lorempixel.com/200/300?key=2" />
<img src="http://lorempixel.com/200/300?key=3" />
<img src="http://lorempixel.com/200/300?key=4" />
<img src="http://lorempixel.com/200/300?key=5" />
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
newsList: [
{'title': 'A simple, seamless scrolling for Vue.js'},
{'title': 'A curated list of awesome things related to Vue.js'}
],
// superurl: [
// {
// url: "",
// img:require("../../assets/1.png")
// },
// {
// url: "",
// img:require("../../assets/pic.jpg")
// },
// {
// url: "",
// img:require("../../assets/2.png")
// },
// {
// url: "",
// img:
// "https://img.mukewang.com/szimg/5c7e6835087ef3d806000338-360-202.jpg"
// },
// {
// url: "",
// img:
// "https://img.mukewang.com/szimg/59b8a486000107fb05400300-360-202.jpg"
// },
// {
// url: "",
// img:
// "https://img.mukewang.com/szimg/5c7516fa081aab2b06000338-360-202.jpg"
// }
// ],
calleft: 0,
// bgColors: ['#E65D6E', '#30B08F', '#4AB7BD', '#FEC171', '#1890ff'],
imagesBox:[
{id:0,idView:require("../../assets/pic.jpg")},
{id:1,idView:require("../../assets/1.png")},
{id:2,idView:require("../../assets/2.png")},
// {id:3,idView:require("../../assets/3.png")},
],
tableData: [{
date: '09-28',
name: '24',
address: '【广西高院队...】广西高院队伍整顿简报官方首发的广东话'
}, {
date: '09-28',
name: '45',
address: '上海市普陀区金沙江路 1517 弄还是个哈哈哈'
}, {
date: '09-28',
name: '67',
address: '上海市普陀区金沙江路 1519 弄好好说话'
}, {
date: '09-28',
name: '89',
address: '上海市普陀区金沙江路 1516 弄合适的哈哈和'
}],
// start------------
userImage:[
{ img: require("../../assets/pic.jpg")},
{ img: require("../../assets/1.png") },
{ img: require("../../assets/2.png") },
{ img: require("../../assets/3.png")},
],
dataList: [
// 开头填充
{ url: require("../../assets/1.png") },
{ url: require("../../assets/2.png") },
{ url: require("../../assets/3.png")},
{ url: require("../../assets/pic.jpg")},
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=0" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=1" },
// { url: require("../../assets/1.png")", path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
// 主体数据开始
// { url: require("../../assets/1.png"), path: "" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=1" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
// 主体数据结束
// 末尾填充
// { url: require("../../assets/2.png"), path: "" },
// { url: require("../../assets/2.png"), path: "/softwareProduct?id=1" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=0" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=1" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
],
// timerId: "",
// count: 0,
// stopFlag: false,
// mousePosition_down: "",//鼠标点击时的位置
// contentListWidth:'',//list的宽度
// listLength:2,//要显示的图片占据的list
// moveFlag:false,//鼠标拖动时，阻止路由跳转
// mousePosition_up: "",
// end--------------
}
},
// computed: {
// optionCustomer(){
// return {
// // step: 0.2, // 数值越大速度滚动越快
// // direction: 2,// 0向下 1向上 2向左 3向右
// // limitMoveNum:2,// 开始无缝滚动的数据量 this.dataList.length
// // hoverStop: true, // 是否开启鼠标悬停stop
// // openWatch: true, // 开启数据实时监控刷新do
// // singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
// // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
// // waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
// step: 1,
// direction: 2,// 0向下 1向上 2向左 3向右
// limitMoveNum: 5,
// openTouch: false,
// // waitTime: 1,
// singleWidth: 30
// }
// }
// },
// computed: {
// optionLeft () {
// return {
// direction: 2,
// limitMoveNum: 4
// // direction:4,
// // limitMoveNum: 4
// }
// }
// },
// mounted() {
// setTimeout(() => {
// this._getItemLength()
// }, 20);
// }
created() {
// // 定时器滚动
// this.$refs.contentList.addEventListener("mouseenter", () => {
// this.stopFlag = true;
// });
// this.$refs.contentList.addEventListener("mouseleave", () => {
// this.stopFlag = false;
// // 在mouseleave时也移除move和up事件
// this.mouseUp()
// });
// this.contentListWidth = parseInt(getComputedStyle(this.$refs.contentList).width);
// this.count = parseInt(getComputedStyle(this.$refs.contentList).width);
// // console.log(this.count);
// this.timerId = setInterval(() => {
// if (this.stopFlag) return;
// this.count++;
// if (
// this.count == this.contentListWidth * this.listLength
// ) {
// this.count = this.contentListWidth
// }
// this.$refs.contentList.style.transform = `translateX(-${this.count}px)`;
// }, 15);
},
// beforeDestroy(){
// clearInterval(this.timerId)
// },
// created(){
// this.move();
// },
methods: {
_getItemLength() {
let children = this.$refs.itemWrapper.children;
console.log(children.length);
return children.length;
}
// routerLink(item){
// if(this.moveFlag) return
// this.$router.push(item.path)
// },
// // 鼠标按下时，添加move 和up事件
// contentListMouseDown(e) {
// // console.log("down", e.offsetX);
// this.mousePosition_down = e.offsetX;
// this.$refs.contentList.addEventListener("mousemove", this.mouseMove);
// this.$refs.contentList.addEventListener("mouseup", this.mouseUp);
// },
// // 鼠标up时，移除move和up事件
// mouseUp() {
// setTimeout(() => {
// this.moveFlag = false
// }, 0);
// // console.log("up", e.offsetX);
// this.removeListener()
// // 拖动到列表最前面时
// if(this.count < this.contentListWidth){
// console.log('小')
// this.count = parseInt(this.count) + this.contentListWidth * this.listLength
// this.$refs.contentList.style.transform = `translateX(-${this.count}px)`;
// }
// // 拖动到列表最后面时
// if(this.count > this.contentListWidth * (this.listLength + 1)){
// console.log(this.count / this.contentListWidth)
// console.log('最大')
// this.count = parseInt(this.count) - this.listLength * this.contentListWidth
// this.$refs.contentList.style.transform = `translateX(-${this.count}px)`;
// }
// },
// // 鼠标move时，list跟随移动
// mouseMove(e) {
// this.moveFlag = true
// // console.log("move", e.offsetX);
// let mousePosition_move = e.offsetX;
// this.count = parseInt(this.mousePosition_down) - mousePosition_move + parseInt(this.count);
// // console.log(this.count);
// this.$refs.contentList.style.transform = `translateX(-${this.count}px)`;
// },
// // 移除contentlist的mousemove 和 mouseup；在鼠标up、鼠标移出此元素、时。
// removeListener(){
// this.$refs.contentList.removeEventListener("mousemove", this.mouseMove);
// this.$refs.contentList.removeEventListener("mouseup", this.mouseUp);
// }
// //移动
// move() {
// this.timer = setInterval(this.starmove, 5000);
// },
// //开始移动
// starmove() {
// this.calleft -= 340;
// if (this.calleft < -1200) {
// this.calleft = 0;
// }
// },
// //鼠标悬停时停止移动
// stopmove() {
// clearInterval(this.timer);
// },
// //点击按钮左移
// zuohua() {
// this.calleft -= 340;
// if (this.calleft < -1200) {
// this.calleft = 0;
// }
// },
// //点击按钮右移
// youhua() {
// this.calleft += 340;
// if (this.calleft > 0) {
// this.calleft = -1020;
// }
// }
}
}
</script>
<style lang="scss" scoped>
.top-info{
margin:15px 0;
border-bottom:2px solid #34bab2;
padding-bottom:15px;
}
.top-info-title{
border-bottom:2px solid #34bab2;
padding-bottom:5px;
font-weight:bold;
}
.top-info-news{
border-bottom:2px solid black;
padding-bottom:5px;
font-weight:bold;
padding-left:5px;
}
.fist-text{
display:inline-block;
width:26px;
height:26px;
line-height:26px;
text-align:center;
font-size:15px;
color:#fff;
border-radius:50%;
background:#1a3784;
margin-right:3px;
}
.list-container{
border:2px solid #34bab2;
padding:15px 15px;
margin-top:40px;
}
.list-title{
border-bottom:1px dashed #ccc;
line-height: 35px;
}
// 列表start
.type-list li{
list-style-type: square;
// color: #0099ff;
color: blue;
font-size: 16px;
line-height: 35px;
border-bottom: 1px dashed #ccc;
}
.type-list li a{
color: #333;
font-size: 14px;
text-decoration:none;
}
.type-list li:hover{
// color: #ff6900;
color: red;
}
.type-list li:hover a{
// color: #ff6900
color:red;
}
.type-list li:last-of-type{border-bottom:none;}
// 列表end
ul{
margin: 0px;
padding: 0px;
padding-left: 15px;
}
// 轮播图
.carousel-div{
position:relative;
height:100%;
}
.carousel-intro{
position:absolute;
width:100%;
height:25px;
line-height:25px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background:rgba(5, 23, 17, 0.21);
color:#fff;
padding:0 5px;
font-size:12px;
left:0;
bottom:0;
}
.business-ul{
margin:0;
margin-top:10px;
}
.business-ul li{
width:100%;
font-size:13px;
}
.business-ul li .name-txt{
max-width:90%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.business-ul li {
text-decoration:none;
width:100%;
}
.business-ul li :hover {
text-decoration:none;
color:red;
}
.business-ul li+li{
margin-top:5px;
}
.type-div{
padding:5px;
border-left:2px solid #34bab2;
border-right:2px solid #34bab2;
border-bottom:2px solid #34bab2;
}
.left-business-ul{
margin:0;
// padding-top:10px !important;
padding-left:0;
padding:5px;
// border-left:2px solid #34bab2;
// border-right:2px solid #34bab2;
// border-bottom:2px solid #34bab2;
}
.left-business-ul li{
width:100%;
font-size:13px;
height:30px;
line-height:30px;
margin:0 !important;
padding:0 !important;
}
.left-business-ul li:not(:last-child) {
border-bottom:1px solid #ccc;
}
.left-business-ul li .name-txt{
max-width:90%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.left-business-ul li {
text-decoration:none;
width:100%;
}
.left-business-ul li :hover {
text-decoration:none;
color:red;
}
.left-business-ul li+li{
margin-top:5px;
}
// 图片持续滚动动画
.scroll-imgs-list {
list-style: none;
}
.scroll-nav {
// width: 750px;
// height: 170px;
border: 1px solid red;
// margin: 100px auto;
overflow: hidden;
}
.scroll-imgs-list {
width: 200%;
height: 100%;
// animation: picmove 5s linear infinite forwards;
animation:move 4s linear infinite;
}
// @keyframes move {
// 0% {
// transform: translateX(0);
// }
// 100% {
// transform: translateX(-100%);
// }
// }
// @keyframes picmove {
// from {
// transform: translate(0);
// }
// to {
// transform: translate(-750px);
// }
// }
.scroll-imgs-li{
float: left;
}
.scroll-imgs-list .scroll-img{
width: 250px;
height: 170px;
float: left;
}
.scroll-imgs-list:hover {
animation-play-state: paused;
}
// 跑马灯
// #wrap{
// width: 500px;
// height: 100px;
// border: 1px solid #000;
// position: relative;
// margin: 100px auto;
// overflow: hidden;
// }
// #list{
// position: absolute;
// left: 0;
// top: 0;
// margin: 0;
// padding: 0;
// -webkit-animation: 3s move infinite linear;
// width: 200%;
// }
// #list li {
// list-style: none;
// width: 98px;
// height: 98px;
// border: 1px solid #fff;
// background: #000;
// color: #fff;
// font: 50px/98px Arial;
// text-align: center;
// float: left;
// }
// @-webkit-keyframes move{
// 0% {
// left: 0;
// }
// 100% {
// left: -500px;
// }
// }
// @keyframes move {
// 0% {
// left: 0;
// }
// 100% {
// left: -500px;
// }
// }
// #wrap:hover #list {
// -webkit-animation-play-state: paused; /*动画暂停播放*/
// }
/*超链接图片*/
// #divAdd {
// background-color: #ededed;
// /*width: 100%;*/
// /*min-width: 1200px;*/
// width: 1000px;
// margin: 0px auto;
// }
// .divAdd-con {
// margin: 0px auto;
// width: 1000px;
// overflow: auto;
// padding: 30px 0px;
// }
// .divAdd-con img {
// float: left;
// }
// .indexrt {
// margin: 0px 40px;
// }
// .divAddleft img {
// float: left;
// margin-bottom: 7px;
// }
// .divAddleft {
// float: left;
// display: inline;
// width: 370px;
// }
// .divAddrt {
// float: right;
// display: inline;
// margin-top: 7px;
// }
// .back_add {
// background-color: #ededed;
// }
// .divAdd-con img {
// border: none;
// }
// a:focus,
// a:hover {
// color: #23527c;
// }
// .threeImg {
// height: 158px;
// background: #ededed;
// border-bottom: 3px solid #4679b2;
// min-width: 1000px;
// }
// .threeImg .Containt ul {
// margin: 0 auto;
// width: 2400px;
// position: absolute;
// left: 0px;
// cursor: pointer;
// height: 100%;
// }
// .threeImg .Containt ul li {
// width: 300px;
// margin-right: 40px;
// margin-top: 10px;
// float: left;
// }
// .threeImg .Containt ul li img {
// height: 128px;
// width: 100%;
// }
// .Containt {
// position: relative;
// width: 1000px;
// height: 130px;
// overflow: hidden;
// margin: 0 auto;
// }
// .iconleft {
// position: absolute;
// width: 20px;
// height: 80px;
// top: 10px;
// z-index: 99999;
// padding-top: 48px;
// background-color: #ddd;
// vertical-align: middle;
// }
// .iconright {
// position: relative;
// left: 978px;
// top: 70px;
// background-color: #ddd;
// /*position: absolute;*/
// width: 20px;
// height: 80px;
// top: 10px;
// z-index: 99999;
// padding-top: 48px;
// background-color: #ddd;
// vertical-align: middle;
// }
// 走马灯======================
// .project-case {
// padding-bottom: 3rem;
// overflow: hidden;
// .title {
// font-size: 3.6rem;
// padding: 5rem 0;
// span {
// cursor: pointer;
// }
// }
// .content {
// margin-top:15px;
// .content-list {
// user-select: none;
// transform: translateX(-33.33%);
// display: flex;
// flex-wrap: nowrap;
// width: 100%;
// .content-item {
// padding-right:10px;
// width:100%;
// .swip-img {
// transition: all 0.5s;
// width: 100%;
// cursor: pointer;
// &:hover {
// transform: scale(1.3);
// }
// }
// }
// }
// }
// }
.seamless-warp3 {
overflow: hidden;
height: 25px;
// width: 380px;
width: 100%;
ul{
list-style:none;
margin:0;
padding:0;
}
ul .item {
width: 120%;
// width: 580px;
// background:blue;
li {
float: left;
// width: 380px;
// height: 25px;
// margin-right: 10px;
}
}
}
</style>
<style lang="scss" scoped>
// .seamless-warp2 {
// margin-top:15px;
// border:1px solid red;
// overflow: hidden;
// height: 25px;
// width: 380px;
// ul.item {
// list-style:none;
// width: 580px;
// li {
// float: left;
// margin-right: 10px;
// }
// }
// }
// .userImage {
// overflow:hidden;
// .userImageAllWrapper {
// width:1160px;
// list-style:none;
// display:flex;
// // flex-wrap:wrap;
// &:last-child {
// margin-left: -40px;
// }
// li {
// margin-right: 20px;
// margin-bottom :20px;
// padding: 10px 30px;
// border: 1px solid #ECECEC;
// img {
// display:flex;
// }
// }
// }
// }
.container {
// width: 510px;
width: 100%;
height: 300px;
display: inline-block;
overflow: hidden;
}
.scroll-inline-container {
white-space: nowrap;
overflow-x: scroll;
font-size: 0;
}
.scroll-container {
display: inline-block;
animation: infiniteScroll 15s linear infinite;
}
.scroll-container img {
width: 200px;
height: 300px;
margin-right: 5px;
}
@keyframes infiniteScroll {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
</style>
src/views/news/index.vue
<template>
<div>
<el-row>
<el-col :span="16" :offset="4">
<el-row class="top-info" style="">
<!--<span class="fist-text" style="">工</span>
<span>作信息</span>-->
<el-col :span="18" :offset="3">
<!--<el-row class="top-info" style="">
<div >
<span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right">
......@@ -12,9 +11,193 @@
<el-breadcrumb-item>法院新闻</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-row>-->
<!--第一栏开始-->
<el-row :gutter="20" class="mt-15 first-zone-style">
<el-col :span="8" style="padding-left:0;padding-right:0;">
<div >
<el-carousel style="border-radius:8px;" height="250px" indicator-position="outside" :interval="4000">
<el-carousel-item style="border-radius:8px;" v-for="item in imagesBox" :key="item.id">
<div class="carousel-div" style="border-radius:8px;">
<el-image :src="item.idView" style="width:100%;height:100%;"></el-image>
<div class="carousel-intro" style="">
南宁中院：市首个族老矛盾调处中心成立
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="mt-10 zone-style">
<div class="mb-15 k-flex-between-center">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div>新闻总类排行</div>
</div>
<div style="font-size:12px;color: #999999;">
<!--<span>MORE></span>-->
<el-button>今天</el-button>
<el-button>一周</el-button>
<el-button>一个月</el-button>
</div>
</div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list">
<div class="article-name">
<span class="right-line">
我为群众办实事
<span class="line-div"></span>
</span>
<span >{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</div>
</el-col>
<el-col :span="16" style="">
<el-row :gutter="20">
<el-col :span="12" style="">
<div class="zone-style">
<div class="k-flex-between-center">
<!--<span class="fist-text" style="">今</span>
<span>日头条</span>-->
<div class="btns-switch">
<el-button @click.native="switchBtn(0)" :class="['btn-item',{'sanjiao':activeItem==0}]">最新消息</el-button>
<el-button @click.native="switchBtn(1)" :class="['btn-item',{'sanjiao':activeItem==1}]">关注自己的法院</el-button>
</div>
<div style="font-size:12px;color: #999999;">
<span>MORE></span>
</div>
</div>
<!--今日头条开始-->
<div v-if="activeItem==0">
<div class="mt-10 mb-5 k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div class="gonggao-text">
<span >教育整顿进行时</span>
<span>鹿心社与自治区级政法机关领导班子成立交付给来访登记过了多久</span>
</div>
</div>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list">
<div class="article-name">
<span class="right-line">
我为群众办实事
<span class="line-div"></span>
</span>
<span >{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</div>
<!--今日头条结束-->
<!--工作信息开始-->
<!--<div v-if="activeItem==1" class="mt-15">
<el-row :gutter="20">
<el-col :span="8" style="">
<div class="work-tab-list">
<div class="tab-item">
全&ensp;&ensp;&ensp;&ensp;部
</div>
<div class="tab-item">
桂高法通报
</div>
<div class="tab-item">
最高人民法院简报
</div>
<div class="tab-item">
广西高院简报<br/>信息专报
</div>
<div class="tab-item">
广西高院队伍<br/>教育整顿简报和动态
</div>
<div class="tab-item">
最高人民法院队伍<br/>教育整顿工作简报
</div>
</div>
</el-col >
<el-col :span="16" style="">
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between work-top-list">
<div class="article-name" style="">
<span >{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</el-col >
</el-row>
</div>-->
<!--工作信息结束-->
</div>
</el-col>
<el-col :span="12" >
<div class="zone-style">
<div class="k-flex-between-center">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div>精彩回顾</div>
</div>
<div style="font-size:12px;color: #999999;">
<span>MORE></span>
</div>
</div>
<el-row class="mt-10 mb-10" :gutter="10">
<el-col :span="12">
<el-image style="" :src="require('../../assets/pic.jpg')"></el-image>
</el-col :span="12">
<el-col :span="12">
<div class="re-see">
结果立刻发动进攻类库的结构来看到付即可购房贷款逛街看到路上经过考虑工具开发架构框架
<span style="color:red;font-size:10px;">[详细]</span>
</div>
</el-col :span="12">
</el-row>
<div v-for="(item,index) in topList" :key="index" class="k-flex k-space-between top-list">
<div class="article-name">
<!--<span class="right-line">我为群众办实事</span>-->
<span class="right-line">{{item.name}}</span>
</div>
<div>{{item.date}}</div>
</div>
</div>
</el-col>
</el-row>
<el-row class="mt-10">
<div class="zone-style">
<div class="k-flex-between-center">
<div class="k-flex k-align-center">
<img class="mr-5 gong-icon" style="" src="../../assets/home/gonggao.png"></img>
<div>干警作品</div>
</div>
<div style="font-size:12px;color: #999999;">
<span>MORE></span>
</div>
</div>
<el-row class="mt-15" :gutter="20">
<el-col style="border-radius:5px;" :span="8" v-for="item in imagesBox" :key="item.id">
<div class="imgs-div" style="width:100%;border-radius:8px;" >
<el-image :src="item.idView" style="width:100%;display:block;border-radius:5px;">
</el-image>
<div class="imgs-intro" style="width:100%;border-radius:0 0 5px 5px;">
<span>&ensp;南宁中院：市首个族老矛盾调处中心成立&ensp;</span>
</div>
</div>
</el-col>
</el-row>
</div>
</el-row>
</el-col>
</el-row>
<!--第一栏结束-->
<el-row :gutter="20">
<!--<el-row :gutter="20">
<el-col :span="8">
<el-carousel height="250px" indicator-position="outside" :interval="4000">
<el-carousel-item v-for="item in imagesBox" :key="item.id">
......@@ -109,8 +292,6 @@
</div>
</li>
</ul>
</el-col>
</el-row>
......@@ -120,14 +301,9 @@
<li class="scroll-imgs-li" v-for="item in imagesBox" :key="item.id">
<el-image class="scroll-img" :src="item.idView" ></el-image>
</li>
<!--<li class="scroll-imgs-li" v-for="item in imagesBox" :key="item.id">
<el-image class="scroll-img" :src="item.idView" ></el-image>
</li>-->
</ul>
</div>
</el-row>
</el-row>-->
<!--<el-row>
<div class="back_add">
......@@ -149,6 +325,81 @@
</div>
</el-row>-->
<!--<el-row class="project-case">
el-col :span="24" class="title">
<router-link to="/customerCase" tag="span">经典案例</router-link>
</el-col>
<div class="content">
<div
class="content-list"
ref="contentList"
@mousedown.prevent="contentListMouseDown"
>
<el-col
class="content-item"
:span="4"
v-for="(item, index) in dataList"
:key="index"
>
<router-link :to="item.path">
<el-image class="swip-img" @mousedown.prevent="" @click="routerLink(item)" :src="item.url" alt="" ></el-image>
</router-link>
</el-col>
</div>
</div>
</el-row>-->
<!--<vue-seamless-scroll style="border:1px solid red;margin-top:15px;" :data="dataList" :class-option="optionLeft" class="seamless-warp3">
<ul class="item">
<li v-for="item in newsList" v-text="item.title">
</li>
</ul>
<div class="scroll-nav">-->
<!--<ul class="item">
<li v-for="(item,index) in dataList" :key="index">
<el-image style="width:100%;height:100%;" :src="item.url"></el-image>
</li>
</ul>-->
<!--</div>
</vue-seamless-scroll>-->
<!--<vue-seamless-scroll :data="listData" class="seamless-warp">
<ul class="item">
<li v-for="item in listData">
<span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>-->
<!--<div ref="itemWrapper" class="container" style="margin-top:15px;">
<div class="scroll-inline-container">
<div class="scroll-container">
<img src="http://lorempixel.com/200/300?key=1" />
<img src="http://lorempixel.com/200/300?key=2" />
<img src="http://lorempixel.com/200/300?key=3" />
<img src="http://lorempixel.com/200/300?key=4" />
<img src="http://lorempixel.com/200/300?key=5" />
</div>
<div class="scroll-container">
<img src="http://lorempixel.com/200/300?key=1" />
<img src="http://lorempixel.com/200/300?key=2" />
<img src="http://lorempixel.com/200/300?key=3" />
<img src="http://lorempixel.com/200/300?key=4" />
<img src="http://lorempixel.com/200/300?key=5" />
</div>
</div>
</div>-->
</el-col>
</el-row>
......@@ -160,19 +411,64 @@
export default {
data() {
return {
superurl: [
imagesBox:[
{id:0,idView:require("../../assets/pic.jpg")},
{id:1,idView:require("../../assets/1.png")},
{id:2,idView:require("../../assets/2.png")},
{id:3,idView:require("../../assets/3.png")},
{id:0,idView:require("../../assets/pic.jpg")},
{id:1,idView:require("../../assets/1.png")},
{id:2,idView:require("../../assets/2.png")},
{id:3,idView:require("../../assets/3.png")},
],
activeItem:0,
topList:[
{
name:'开展司法教助全集中发放活动尽量克服冠军费德勒冠军费德勒空军航空发货过来会考虑好看',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
url: "",
img:require("../../assets/1.png")
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
url: "",
img:require("../../assets/pic.jpg")
name:'开展司法教助全集中发放活动',
date:'09-23'
},
{
url: "",
img:require("../../assets/2.png")
name:'开展司法教助全集中发放活动',
date:'09-23'
},
],
newsList: [
{'title': 'A simple, seamless scrolling for Vue.js'},
{'title': 'A curated list of awesome things related to Vue.js'}
],
// superurl: [
// {
// url: "",
// img:require("../../assets/1.png")
// },
// {
// url: "",
// img:require("../../assets/pic.jpg")
// },
// {
// url: "",
// img:require("../../assets/2.png")
// },
// {
// url: "",
// img:
......@@ -188,15 +484,15 @@ export default {
// img:
// "https://img.mukewang.com/szimg/5c7516fa081aab2b06000338-360-202.jpg"
// }
],
// ],
calleft: 0,
// bgColors: ['#E65D6E', '#30B08F', '#4AB7BD', '#FEC171', '#1890ff'],
imagesBox:[
{id:0,idView:require("../../assets/pic.jpg")},
{id:1,idView:require("../../assets/1.png")},
{id:2,idView:require("../../assets/2.png")},
// {id:3,idView:require("../../assets/3.png")},
],
// imagesBox:[
// {id:0,idView:require("../../assets/pic.jpg")},
// {id:1,idView:require("../../assets/1.png")},
// {id:2,idView:require("../../assets/2.png")},
// // {id:3,idView:require("../../assets/3.png")},
// ],
tableData: [{
date: '09-28',
name: '24',
......@@ -214,45 +510,321 @@ export default {
name: '89',
address: '上海市普陀区金沙江路 1516 弄合适的哈哈和'
}],
// start------------
userImage:[
{ img: require("../../assets/pic.jpg")},
{ img: require("../../assets/1.png") },
{ img: require("../../assets/2.png") },
{ img: require("../../assets/3.png")},
],
dataList: [
// 开头填充
{ url: require("../../assets/1.png") },
{ url: require("../../assets/2.png") },
{ url: require("../../assets/3.png")},
{ url: require("../../assets/pic.jpg")},
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=0" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=1" },
// { url: require("../../assets/1.png")", path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
// 主体数据开始
// { url: require("../../assets/1.png"), path: "" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=1" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
// 主体数据结束
// 末尾填充
// { url: require("../../assets/2.png"), path: "" },
// { url: require("../../assets/2.png"), path: "/softwareProduct?id=1" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=0" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=1" },
// { url: require("../../assets/1.png"), path: "/softwareProduct?id=2" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=0" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=1" },
// { url: require("../../assets/1.png"), path: "/caseDetail?id=2" },
],
// timerId: "",
// count: 0,
// stopFlag: false,
// mousePosition_down: "",//鼠标点击时的位置
// contentListWidth:'',//list的宽度
// listLength:2,//要显示的图片占据的list
// moveFlag:false,//鼠标拖动时，阻止路由跳转
// mousePosition_up: "",
// end--------------
}
},
created(){
this.move();
// computed: {
// optionCustomer(){
// return {
// // step: 0.2, // 数值越大速度滚动越快
// // direction: 2,// 0向下 1向上 2向左 3向右
// // limitMoveNum:2,// 开始无缝滚动的数据量 this.dataList.length
// // hoverStop: true, // 是否开启鼠标悬停stop
// // openWatch: true, // 开启数据实时监控刷新do
// // singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
// // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
// // waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
// step: 1,
// direction: 2,// 0向下 1向上 2向左 3向右
// limitMoveNum: 5,
// openTouch: false,
// // waitTime: 1,
// singleWidth: 30
// }
// }
// },
// computed: {
// optionLeft () {
// return {
// direction: 2,
// limitMoveNum: 4
// // direction:4,
// // limitMoveNum: 4
// }
// }
// },
// mounted() {
// setTimeout(() => {
// this._getItemLength()
// }, 20);
// }
created() {
// // 定时器滚动
// this.$refs.contentList.addEventListener("mouseenter", () => {
// this.stopFlag = true;
// });
// this.$refs.contentList.addEventListener("mouseleave", () => {
// this.stopFlag = false;
// // 在mouseleave时也移除move和up事件
// this.mouseUp()
// });
// this.contentListWidth = parseInt(getComputedStyle(this.$refs.contentList).width);
// this.count = parseInt(getComputedStyle(this.$refs.contentList).width);
// // console.log(this.count);
// this.timerId = setInterval(() => {
// if (this.stopFlag) return;
// this.count++;
// if (
// this.count == this.contentListWidth * this.listLength
// ) {
// this.count = this.contentListWidth
// }
// this.$refs.contentList.style.transform = `translateX(-${this.count}px)`;
// }, 15);
},
// beforeDestroy(){
// clearInterval(this.timerId)
// },
// created(){
// this.move();
// },
methods: {
//移动
move() {
this.timer = setInterval(this.starmove, 5000);
},
//开始移动
starmove() {
this.calleft -= 340;
if (this.calleft < -1200) {
this.calleft = 0;
}
},
//鼠标悬停时停止移动
stopmove() {
clearInterval(this.timer);
_getItemLength() {
let children = this.$refs.itemWrapper.children;
console.log(children.length);
return children.length;
},
//点击按钮左移
zuohua() {
this.calleft -= 340;
if (this.calleft < -1200) {
this.calleft = 0;
}
switchBtn(i){
console.log('111===', i)
this.activeItem=i;
},
//点击按钮右移
youhua() {
this.calleft += 340;
if (this.calleft > 0) {
this.calleft = -1020;
}
}
// routerLink(item){
// if(this.moveFlag) return
// this.$router.push(item.path)
// },
// // 鼠标按下时，添加move 和up事件
// contentListMouseDown(e) {
// // console.log("down", e.offsetX);
// this.mousePosition_down = e.offsetX;
// this.$refs.contentList.addEventListener("mousemove", this.mouseMove);
// this.$refs.contentList.addEventListener("mouseup", this.mouseUp);
// },
// // 鼠标up时，移除move和up事件
// mouseUp() {
// setTimeout(() => {
// this.moveFlag = false
// }, 0);
// // console.log("up", e.offsetX);
// this.removeListener()
// // 拖动到列表最前面时
// if(this.count < this.contentListWidth){
// console.log('小')
// this.count = parseInt(this.count) + this.contentListWidth * this.listLength
// this.$refs.contentList.style.transform = `translateX(-${this.count}px)`;
// }
// // 拖动到列表最后面时
// if(this.count > this.contentListWidth * (this.listLength + 1)){
// console.log(this.count / this.contentListWidth)
// console.log('最大')
// this.count = parseInt(this.count) - this.listLength * this.contentListWidth
// this.$refs.contentList.style.transform = `translateX(-${this.count}px)`;
// }
// },
// // 鼠标move时，list跟随移动
// mouseMove(e) {
// this.moveFlag = true
// // console.log("move", e.offsetX);
// let mousePosition_move = e.offsetX;
// this.count = parseInt(this.mousePosition_down) - mousePosition_move + parseInt(this.count);
// // console.log(this.count);
// this.$refs.contentList.style.transform = `translateX(-${this.count}px)`;
// },
// // 移除contentlist的mousemove 和 mouseup；在鼠标up、鼠标移出此元素、时。
// removeListener(){
// this.$refs.contentList.removeEventListener("mousemove", this.mouseMove);
// this.$refs.contentList.removeEventListener("mouseup", this.mouseUp);
// }
// //移动
// move() {
// this.timer = setInterval(this.starmove, 5000);
// },
// //开始移动
// starmove() {
// this.calleft -= 340;
// if (this.calleft < -1200) {
// this.calleft = 0;
// }
// },
// //鼠标悬停时停止移动
// stopmove() {
// clearInterval(this.timer);
// },
// //点击按钮左移
// zuohua() {
// this.calleft -= 340;
// if (this.calleft < -1200) {
// this.calleft = 0;
// }
// },
// //点击按钮右移
// youhua() {
// this.calleft += 340;
// if (this.calleft > 0) {
// this.calleft = -1020;
// }
// }
}
}
</script>
<style lang="scss" scoped>
// 第一栏
.first-zone-style{
margin-left:0!important;
margin-right:0!important;
}
.zone-style{
background-color:#fff;
padding:15px 15px;
border-radius:5px;
box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05);
}
.carousel-div{
position:relative;
height:100%;
}
.carousel-intro{
position:absolute;
width:100%;
height:25px;
line-height:25px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background:rgba(5, 23, 17, 0.21);
color:#fff;
padding:0 5px;
font-size:12px;
left:0;
bottom:0;
}
.zone-style{
background-color:#fff;
padding:15px 15px;
border-radius:5px;
box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05);
}
// 切换气泡按钮
.btns-switch .btn-item{
display:inline-block;
text-align:center;
border: 1px solid #ff756d;
border-radius: 5px;
color:#ff756d;
}
.btns-switch .sanjiao{
background:#D33237;
color:#fff;
position:relative;
}
.sanjiao:after {
position: absolute;
display: inline-block;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #D33237;
left:30px;
bottom: -8px;
content: '';
}
// 公告
.gong-icon{
width:13px;
height:13px;
}
.gonggao-text{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#FF756D;
font-family: PingFang SC, PingFang SC-Medium;
font-size:13px;
}
// .partnerInfo ul li {
// list-style: none;
// line-height: 1;
// }
// .ul-list li{
// border-radius:5px;
// background:#fff;
// padding:10px 10px;
// font-size:12px;
// }
// .ul-list li img{
// width:30px;
// height:30px;
// }
// .ul-list li:hover{
// background:#D33237;
// color:#fff;
// }
.top-info{
margin:15px 0;
border-bottom:2px solid #34bab2;
......@@ -340,6 +912,75 @@ ul{
bottom:0;
}
.top-line{
padding:5px 15px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border-bottom:1px solid #ccc;
}
.top-list .article-name .right-line{
padding-right:2px;
// border-right:2px solid black;
margin-right:5px;
position:relative;
color:black;
}
.line-div{
position:absolute;
right:0;
top:0;
height:30px;
width:2px;
background:black;
}
.top-list .article-name{
width:85%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#999999;
}
.re-see{
font-size:12px;
color: #333333;
}
.top-list{
padding:5px 0;
font-size:10px;
// color:#999999;
color:black;
}
.top-list:hover{
color:red;
}
.top-list:hover .article-name{
color:red;
}
.top-list:hover .right-line{
color:red ;
}
// 图片墙
.imgs-div{
position:relative;
height:100%;
}
.imgs-div{
margin-bottom:10px;
}
.imgs-intro{
position:absolute;
height:25px;
line-height:25px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background:#ccc;
color:#fff;
font-size:12px;
left:0;
bottom:0;
}
.business-ul{
margin:0;
margin-top:10px;
......@@ -376,12 +1017,8 @@ ul{
}
.left-business-ul{
margin:0;
// padding-top:10px !important;
padding-left:0;
padding:5px;
// border-left:2px solid #34bab2;
// border-right:2px solid #34bab2;
// border-bottom:2px solid #34bab2;
}
.left-business-ul li{
width:100%;
......@@ -414,6 +1051,7 @@ ul{
}
// 图片持续滚动动画
.scroll-imgs-list {
list-style: none;
......@@ -434,24 +1072,24 @@ ul{
animation:move 4s linear infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
// @keyframes move {
// 0% {
// transform: translateX(0);
// }
// 100% {
// transform: translateX(-100%);
// }
// }
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}
// @keyframes picmove {
// from {
// transform: translate(0);
// }
// to {
// transform: translate(-750px);
// }
// }
.scroll-imgs-li{
float: left;
}
......@@ -520,123 +1158,253 @@ ul{
/*超链接图片*/
#divAdd {
background-color: #ededed;
/*width: 100%;*/
/*min-width: 1200px;*/
width: 1000px;
margin: 0px auto;
}
// #divAdd {
// background-color: #ededed;
// /*width: 100%;*/
// /*min-width: 1200px;*/
// width: 1000px;
// margin: 0px auto;
// }
.divAdd-con {
margin: 0px auto;
width: 1000px;
overflow: auto;
padding: 30px 0px;
}
// .divAdd-con {
// margin: 0px auto;
// width: 1000px;
// overflow: auto;
// padding: 30px 0px;
// }
.divAdd-con img {
float: left;
}
// .divAdd-con img {
// float: left;
// }
.indexrt {
margin: 0px 40px;
}
// .indexrt {
// margin: 0px 40px;
// }
.divAddleft img {
float: left;
margin-bottom: 7px;
}
// .divAddleft img {
// float: left;
// margin-bottom: 7px;
// }
.divAddleft {
float: left;
display: inline;
width: 370px;
}
// .divAddleft {
// float: left;
// display: inline;
// width: 370px;
// }
.divAddrt {
float: right;
display: inline;
margin-top: 7px;
}
// .divAddrt {
// float: right;
// display: inline;
// margin-top: 7px;
// }
.back_add {
background-color: #ededed;
}
// .back_add {
// background-color: #ededed;
// }
.divAdd-con img {
border: none;
}
// .divAdd-con img {
// border: none;
// }
a:focus,
a:hover {
color: #23527c;
}
// a:focus,
// a:hover {
// color: #23527c;
// }
.threeImg {
height: 158px;
background: #ededed;
border-bottom: 3px solid #4679b2;
min-width: 1000px;
}
// .threeImg {
// height: 158px;
// background: #ededed;
// border-bottom: 3px solid #4679b2;
// min-width: 1000px;
// }
.threeImg .Containt ul {
margin: 0 auto;
width: 2400px;
position: absolute;
left: 0px;
cursor: pointer;
height: 100%;
}
// .threeImg .Containt ul {
// margin: 0 auto;
// width: 2400px;
// position: absolute;
// left: 0px;
// cursor: pointer;
// height: 100%;
// }
.threeImg .Containt ul li {
width: 300px;
margin-right: 40px;
margin-top: 10px;
float: left;
}
// .threeImg .Containt ul li {
// width: 300px;
// margin-right: 40px;
// margin-top: 10px;
// float: left;
// }
.threeImg .Containt ul li img {
height: 128px;
width: 100%;
}
// .threeImg .Containt ul li img {
// height: 128px;
// width: 100%;
// }
.Containt {
position: relative;
width: 1000px;
height: 130px;
overflow: hidden;
margin: 0 auto;
}
// .Containt {
// position: relative;
// width: 1000px;
// height: 130px;
// overflow: hidden;
// margin: 0 auto;
// }
.iconleft {
position: absolute;
width: 20px;
height: 80px;
top: 10px;
z-index: 99999;
padding-top: 48px;
background-color: #ddd;
vertical-align: middle;
}
// .iconleft {
// position: absolute;
// width: 20px;
// height: 80px;
// top: 10px;
// z-index: 99999;
// padding-top: 48px;
// background-color: #ddd;
// vertical-align: middle;
// }
.iconright {
position: relative;
left: 978px;
top: 70px;
background-color: #ddd;
/*position: absolute;*/
width: 20px;
height: 80px;
top: 10px;
z-index: 99999;
padding-top: 48px;
background-color: #ddd;
vertical-align: middle;
// .iconright {
// position: relative;
// left: 978px;
// top: 70px;
// background-color: #ddd;
// /*position: absolute;*/
// width: 20px;
// height: 80px;
// top: 10px;
// z-index: 99999;
// padding-top: 48px;
// background-color: #ddd;
// vertical-align: middle;
// }
// 走马灯======================
// .project-case {
// padding-bottom: 3rem;
// overflow: hidden;
// .title {
// font-size: 3.6rem;
// padding: 5rem 0;
// span {
// cursor: pointer;
// }
// }
// .content {
// margin-top:15px;
// .content-list {
// user-select: none;
// transform: translateX(-33.33%);
// display: flex;
// flex-wrap: nowrap;
// width: 100%;
// .content-item {
// padding-right:10px;
// width:100%;
// .swip-img {
// transition: all 0.5s;
// width: 100%;
// cursor: pointer;
// &:hover {
// transform: scale(1.3);
// }
// }
// }
// }
// }
// }
.seamless-warp3 {
overflow: hidden;
height: 25px;
// width: 380px;
width: 100%;
ul{
list-style:none;
margin:0;
padding:0;
}
ul .item {
width: 120%;
// width: 580px;
// background:blue;
li {
float: left;
// width: 380px;
// height: 25px;
// margin-right: 10px;
}
}
}
</style>
<style lang="scss" scoped>
// .seamless-warp2 {
// margin-top:15px;
// border:1px solid red;
// overflow: hidden;
// height: 25px;
// width: 380px;
// ul.item {
// list-style:none;
// width: 580px;
// li {
// float: left;
// margin-right: 10px;
// }
// }
// }
// .userImage {
// overflow:hidden;
// .userImageAllWrapper {
// width:1160px;
// list-style:none;
// display:flex;
// // flex-wrap:wrap;
// &:last-child {
// margin-left: -40px;
// }
// li {
// margin-right: 20px;
// margin-bottom :20px;
// padding: 10px 30px;
// border: 1px solid #ECECEC;
// img {
// display:flex;
// }
// }
// }
// }
.container {
// width: 510px;
width: 100%;
height: 300px;
display: inline-block;
overflow: hidden;
}
.scroll-inline-container {
white-space: nowrap;
overflow-x: scroll;
font-size: 0;
}
.scroll-container {
display: inline-block;
animation: infiniteScroll 15s linear infinite;
}
.scroll-container img {
width: 200px;
height: 300px;
margin-right: 5px;
}
@keyframes infiniteScroll {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
</style>
src/views/show-old/index.vue 0 → 100644
<template>
<div >
<el-row >
<el-col :span="16" :offset="4">
<el-row class="top-info" style="">
<span class="fist-text" style="">工</span>
<span>作信息</span>
<div style="float:right;">
<span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="list-container" style="">
<div class="list-title" style="">按分类查看</div>
<ul class="type-list">
<li><a href="#">最高法通报</a></li>
<li><a href="#">最高人民法院简报</a></li>
</ul>
</div>
</el-col>
<el-col :span="16">
<div style="min-height:76vh;">
<el-table
:header-cell-style="{'text-align':'center','font-size':'13px','color':'black'}"
:cell-style="{'font-size':'13px','border-bottom':'none'}"
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
property="address"
label="标题">
</el-table-column>
<el-table-column
align="center"
property="date"
label="时间"
width="150">
</el-table-column>
<el-table-column
align="center"
property="name"
label="点击"
width="120">
</el-table-column>
<el-table-column
align="center"
property="name"
label="评论"
width="50">
</el-table-column>
</el-table>
<div style="margin-top:10px;">
<el-pagination
prev-text="上一页"
next-text="下一页"
layout="total,sizes,prev, pager, next,jumper"
:total="1000"
page-sizes=""
page-size="15"
current-page="1"
@current-change=""
@size-change=""
/>
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "show",
data() {
return {
tableData: [{
date: '2016-05-02 12:00:00',
name: '24',
address: '【广西高院队...】广西高院队伍整顿简报'
}, {
date: '2016-05-04 12:00:00',
name: '45',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01 12:00:00',
name: '67',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03 12:00:00',
name: '89',
address: '上海市普陀区金沙江路 1516 弄'
}],
}
},
created() {
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.top-info{
margin:15px 0;
border-bottom:2px solid #34bab2;
padding-bottom:15px;
}
.fist-text{
display:inline-block;
width:26px;
height:26px;
line-height:26px;
text-align:center;
font-size:15px;
color:#fff;
border-radius:50%;
background:#1a3784;
margin-right:3px;
}
.list-container{
border:2px solid #34bab2;
padding:15px 15px;
margin-top:40px;
}
.list-title{
border-bottom:1px dashed #ccc;
line-height: 35px;
}
// 列表start
.type-list li{
list-style-type: square;
// color: #0099ff;
color: blue;
font-size: 16px;
line-height: 35px;
border-bottom: 1px dashed #ccc;
}
.type-list li a{
color: #333;
font-size: 14px;
text-decoration:none;
}
.type-list li:hover{
// color: #ff6900;
color: red;
}
.type-list li:hover a{
// color: #ff6900
color:red;
}
.type-list li:last-of-type{border-bottom:none;}
// 列表end
ul{
margin: 0px;
padding: 0px;
padding-left: 15px;
}
</style>
\ No newline at end of file
src/views/show/index.vue
<template>
<div >
<el-row >
<el-col :span="16" :offset="4">
<el-col :span="18" :offset="3">
<el-row class="top-info" style="">
<!--<el-row class="top-info" style="">
<span class="fist-text" style="">工</span>
<span>作信息</span>
<div style="float:right;">
......@@ -13,23 +13,38 @@
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-row>
</el-row>-->
<el-row :gutter="20">
<el-col :span="8">
<el-row class="mt-20" :gutter="20">
<!--左边栏目开始-->
<el-col :span="5">
<div class="list-container" style="">
<div class="list-title" style="">按分类查看</div>
<div class="list-title mb-10" style="">按分类查看</div>
<!--<ul class="type-list">
<li><a href="#">最高法通报</a></li>
<li><a href="#">最高人民法院简报</a></li>
</ul>-->
<!--<el-tree :data="dataTreeFile" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
<ul class="type-list">
<li><a href="#">最高法通报</a></li>
<li><a href="#">最高人民法院简报</a></li>
</ul>
</div>
</el-col>
<el-col :span="16">
<div style="min-height:76vh;">
<!--左边栏目结束-->
<el-col :span="19">
<div class="zone-style">
<div style="min-height:76vh;">
<div style="">
<span>当前位置:</span>
<el-breadcrumb style="display:inline-block;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-table
:header-cell-style="{'text-align':'center','font-size':'13px','color':'black'}"
:header-cell-style="{'text-align':'center','font-size':'15px','color':'black'}"
:cell-style="{'font-size':'13px','border-bottom':'none'}"
ref="singleTable"
:data="tableData"
......@@ -37,8 +52,12 @@
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
align="left"
property="address"
label="标题">
<template slot-scope="scope">
<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{scope.row.address}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
......@@ -74,8 +93,11 @@
/>
</div>
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
......@@ -88,10 +110,49 @@ export default {
data() {
return {
dataTreeFile: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
tableData: [{
date: '2016-05-02 12:00:00',
name: '24',
address: '【广西高院队...】广西高院队伍整顿简报'
address: '【广西高院队...】广西高院队伍整顿简报解放军过来了就收到了开花结果的工具打开两个换个角度思考和监控工具打开换个角度来看回家国家的客户给几个大客户就'
}, {
date: '2016-05-04 12:00:00',
name: '45',
......@@ -118,6 +179,49 @@ export default {
}
</script>
<style lang="scss" scoped>
// 树形菜单图标start-----------------------
.el-tree{
background:transparent;
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/*//有子节点 且未展开*/
.el-tree /deep/ .el-icon-caret-right:before
{
background: url("../../assets/wjjg.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*//有子节点 且已展开*/
.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
background: url("../../assets/wjjk.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*//没有子节点*/
.el-tree /deep/ .el-tree-node__expand-icon.is-leaf::before
{
background: url("../../assets/wj.png") no-repeat 0 3px;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
// 树形菜单图标end-----------------------
.top-info{
margin:15px 0;
border-bottom:2px solid #34bab2;
......@@ -136,10 +240,11 @@ export default {
margin-right:3px;
}
.list-container{
border:2px solid #34bab2;
padding:15px 15px;
margin-top:40px;
// border:2px solid #34bab2;
// padding:15px 15px;
// margin-top:40px;
}
.list-title{
border-bottom:1px dashed #ccc;
line-height: 35px;
......@@ -173,8 +278,18 @@ ul{
padding: 0px;
padding-left: 15px;
}
.zone-style{
background-color:#fff;
padding:15px 15px;
border-radius:5px;
box-shadow: -5px 0px 20px 5px rgba(0,0,0,0.05);
}
::v-deep{
.el-table th:first-child>.cell{
text-align:left!important;
}
}
......
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