123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <template>
- <div id="notice">
- <el-row>
- <el-col :span="24">
- <el-col :span="24" class="top">
- <el-col :span="24" class="english">{{noticeinfo.english}}</el-col>
- <el-col :span="24" class="title">{{noticeinfo.title}}</el-col>
- </el-col>
- <el-col :span="24" class="info">
- <el-col :span="24" class="infoBei">
- <span>{{title}}</span>
- </el-col>
- <el-col :span="24" class="infolist">
- <el-col :span="24" class="button">
- <el-button class="icon" style="margin: 0 43px 0 0;"><i class="el-icon-arrow-left"></i></el-button>
- <el-button class="icon" style="margin: 0 10px;"><i class="el-icon-arrow-right"></i></el-button>
- </el-col>
- <el-col :span="24" class="noticelist">
- <el-col :span="8" class="content" v-for="(item, index) in noticelist" :key="index">
- <el-link :underline="false">
- <el-col :span="24" class="image">
- <el-image style="width:100%;height:226px;" :src="item.url"></el-image>
- </el-col>
- <el-col :span="24" class="title">
- <p>{{item.title}}</p>
- </el-col>
- <el-col :span="24" class="text">
- <p>{{item.text}}</p>
- </el-col>
- <el-col :span="24" class="time">
- {{item.time}}
- </el-col>
- </el-link>
- </el-col>
- </el-col>
- </el-col>
- </el-col>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- export default {
- name: 'notice',
- props: {
- noticeinfo: null,
- noticelist: null,
- },
- components: {},
- data: () => ({
- title: '最新公告',
- }),
- created() { },
- computed: {},
- methods: {},
- };
- </script>
- <style lang="less" scoped>
- p {
- margin: 0;
- padding: 0;
- }
- .top {
- height: 100px;
- text-align: center;
- margin-bottom: 42px;
- }
- .top .english {
- text-transform: uppercase;
- color: #5b5e66;
- font-family: 微软雅黑;
- font-size: 42px;
- }
- .top .title {
- color: #415285;
- font-size: 36px;
- font-family: 微软雅黑;
- }
- .info {
- height: 513px;
- }
- .info .infoBei {
- width: 294px;
- height: 512px;
- background-color: #415285;
- }
- .info .infoBei span {
- margin: 52px 0 0 69px;
- display: inline-block;
- font-size: 22px;
- font-family: 微软雅黑;
- color: #fff;
- }
- .infolist {
- width: 1130px;
- height: 470px;
- position: absolute;
- top: 166px;
- left: 72px;
- }
- .button {
- text-align: right;
- height: 40px;
- margin-bottom: 30px;
- }
- .button .icon {
- width: 40px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- padding: 0;
- border-radius: 90px;
- border: 2px solid #ccc;
- }
- .button .icon .el-icon-arrow-left {
- font-size: 20px;
- font-weight: bold;
- color: #ccc;
- }
- .button .icon .el-icon-arrow-right {
- font-size: 20px;
- font-weight: bold;
- color: #ccc;
- }
- .noticelist {
- height: 400px;
- background: #fff;
- }
- .content {
- width: 346px;
- height: 400px;
- margin-right: 45px;
- box-shadow: 0 0 5px #ccc;
- }
- .content:last-child{
- margin-right:0;
- }
- .content .image {
- width: 346px;
- height: 226px;
- margin-bottom: 15px;
- }
- .content .title p {
- font-size: 24px;
- color: #5b5e66;
- font-family: 微软雅黑;
- margin-bottom: 12px;
- padding: 0 24px;
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-line-clamp: 2;
- word-break: break-all;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- }
- .content .text p {
- font-size: 12px;
- color: #999999;
- font-family: 宋体;
- margin-bottom: 12px;
- padding: 0 24px;
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-line-clamp: 3;
- word-break: break-all;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- }
- .content .time {
- font-size: 18px;
- color: #999999;
- font-family: 宋体;
- text-align: right;
- padding: 0 24px;
- }
- </style>
|