Skip to content

P
project-online-pc
提交 b882705d authored 作者: matian's avatar matian
浏览文件
操作

资料下载新增文件

上级 bfd19338
隐藏空白字符变更
内嵌 并排
正在显示 包含 100 行增加 和 56 行删除
pages/dataDownload/dataDownload.vue
浏览文件 @ b882705d
......@@ -3,8 +3,14 @@
<div class="dataList">
<a target="_blank" :href="item.url" v-for="(item, index) in fileList" :key="index">
<div class="item" @click="download($event, item)">
<img class="item_top" src="https://webapp-pub.ezijing.com/project/sit-plus/download_bg1.png" alt="" />
<div class="doc">{{ item.name }}</div>
<div class="item_left">
<img class="item_left_img" src="https://webapp-pub.ezijing.com/project/sbu-plus/icon_download.png" alt="" />
<div class="item_left_line"></div>
<div class="item_left_doc">{{ item.name }}</div>
</div>
<div class="item_right">
<div class="btn" @click="download($event, item)">立即下载</div>
</div>
</div>
</a>
</div>
......@@ -31,27 +37,16 @@ export default {
{
name: '招生简章',
url:
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/sit-plus/%E6%96%AF%E8%92%82%E6%96%87%E6%96%AF%E7%90%86%E5%B7%A5%E5%AD%A6%E9%99%A2%E5%B7%A5%E7%A8%8B%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%AB%E4%BF%9D%E7%A0%94%E9%A1%B9%E7%9B%AE%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf',
'https://webapp-pub.ezijing.com/project/sit-plus/%E6%96%AF%E8%92%82%E6%96%87%E6%96%AF%E7%90%86%E5%B7%A5%E5%AD%A6%E9%99%A2%E5%B7%A5%E7%A8%8B%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%AB%E4%BF%9D%E7%A0%94%E9%A1%B9%E7%9B%AE%E6%8B%9B%E7%94%9F%E7%AE%80%E7%AB%A0.pdf',
icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png'
},
{
name: '学分模块介绍',
url:
'https://webapp-pub.ezijing.com/project/sit-plus/SIT%E7%A1%95%E5%A3%AB%E5%AD%A6%E5%88%86%E6%A8%A1%E5%9D%97%E4%BB%8B%E7%BB%8D.pdf',
icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png'
}
// {
// name: '常见问题',
// url:
// 'https://webapp-pub.ezijing.com/project/sbu-plus/SBU%E9%87%91%E8%9E%8D%E5%AD%A6%E7%A1%95%E5%A3%AB%20Q%26A.pdf',
// icon: 'https://webapp-pub.ezijing.com/project/marywood/pdf.png'
// }
// {
// name: '申请材料清单.docx',
// url:
// 'https://webapp-pub.ezijing.com/project/marywood/%E7%94%B3%E8%AF%B7%E6%9D%90%E6%96%99%E6%B8%85%E5%8D%95.docx',
// icon: 'https://webapp-pub.ezijing.com/project/marywood/doc.png'
// },
// {
// name: '英文简历模板.doc',
// url:
// 'https://webapp-pub.ezijing.com/project/marywood/%E8%8B%B1%E6%96%87%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.doc',
// icon: 'https://webapp-pub.ezijing.com/project/marywood/doc.png'
// }
]
}
},
......@@ -82,61 +77,110 @@ export default {
padding: 96px 0 108px 0;
.item {
width: 336px;
height: 488px;
width: 790px;
height: 110px;
opacity: 1;
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: center;
flex-direction: column;
cursor: pointer;
background: #f6f6f6;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.38);
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
padding: 0 46px 0 21px;
margin-top: 20px;
.item_left {
display: flex;
justify-content: space-between;
align-items: center;
.item_top {
width: 100%;
height: 348px;
.item_left_img {
width: 47.36px;
height: 47.36px;
}
.item_left_line {
width: 0px;
height: 59px;
border: 1px solid #dedede;
opacity: 1;
margin-left: 52px;
}
.item_left_doc {
font-size: 18px;
font-weight: 400;
margin-left: 48px;
color: #666666;
}
}
.doc {
width: 100%;
height: 140px;
font-size: 22px;
font-weight: 400;
line-height: 141px;
text-align: center;
color: #333333;
.item_right {
.btn {
width: 78px;
height: 27px;
background: #aa1941;
border-radius: 4px;
line-height: 27px;
text-align: center;
font-size: 14px;
color: #ffffff;
}
}
}
}
}
.is-h5 {
.dataList {
padding: 0.48rem 0 0.54rem 0;
width: 3.3rem;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
margin-left: 0.15rem;
padding: 0.48rem 0.61rem 0.3rem;
.item {
width: 1.68rem;
height: 2.45rem;
width: 3.3rem;
height: 0.5rem;
opacity: 1;
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: center;
flex-direction: column;
background: #f6f6f6;
cursor: pointer;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.38);
.item_top {
width: 100%;
height: 1.74rem;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
padding: 0 0.23rem 0 0.1rem;
.item_left {
display: flex;
justify-content: space-between;
align-items: center;
.item_left_img {
width: 0.235rem;
height: 0.235rem;
}
.item_left_line {
width: 0px;
height: 0.3rem;
border: 1px solid #dedede;
opacity: 1;
margin-left: 0.26rem;
}
.item_left_doc {
font-size: 0.08rem;
font-weight: 400;
margin-left: 0.24rem;
color: #666666;
}
}
.doc {
width: 100%;
height: 0.7rem;
font-size: 0.14rem;
font-weight: 400;
line-height: 0.7rem;
text-align: center;
color: #333333;
.item_right {
.btn {
width: 0.65rem;
height: 0.16rem;
background: #aa1941;
border-radius: 4px;
line-height: 0.16rem;
text-align: center;
font-size: 0.08rem;
color: #ffffff;
}
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论