修改自定义页面
夜笙歌
4 months ago
parent
fb07446037
commit
4e3d788288
@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<TitleGroup>
|
||||||
|
<template slot="title">DOWNLOAD THE MATERIALS</template>
|
||||||
|
<template slot="subTitle"> 资料下载</template>
|
||||||
|
</TitleGroup>
|
||||||
|
<div class="content">
|
||||||
|
<el-form ref="form" :inline="true" :model="form" label-width="80px">
|
||||||
|
<el-form-item label="资料类型" style="width: 45%">
|
||||||
|
<el-cascader
|
||||||
|
v-model="value"
|
||||||
|
:options="options"
|
||||||
|
@change="handleChange"></el-cascader>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div>
|
||||||
|
<div v-for="i in fileList" class="fileCard">
|
||||||
|
<div class="cardTitle">{{ i.name }}</div>
|
||||||
|
<div class="cardValue">{{ i.value }}</div>
|
||||||
|
<el-button @click="downFile(i)" type="primary" class="downIcon" icon="el-icon-download " circle></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TitleGroup from "@/components/TitleGroup";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PlatformIntroduction',
|
||||||
|
props: ['data'],
|
||||||
|
components: {
|
||||||
|
TitleGroup
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: ["zhinan", "yingjian"],
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: 'zhinan',
|
||||||
|
label: '指南',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'yingjian',
|
||||||
|
label: '硬件',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'ruanjian',
|
||||||
|
label: '软件',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'wendang',
|
||||||
|
label: '文档',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'yingjian',
|
||||||
|
label: '硬件',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'ruanjian',
|
||||||
|
label: '软件',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
fileList: [
|
||||||
|
{
|
||||||
|
name: '操作指南',
|
||||||
|
value: '硬件操作指南',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '操作指南',
|
||||||
|
value: '硬件操作指南',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '操作指南',
|
||||||
|
value: '硬件操作指南',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange(value) {
|
||||||
|
console.log(value);
|
||||||
|
},
|
||||||
|
downFile(e) {
|
||||||
|
const blob = new Blob([''], {type: 'text/plain'});
|
||||||
|
|
||||||
|
// 创建临时链接
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = URL.createObjectURL(blob);
|
||||||
|
link.download = '文档.txt'; // 下载的文件名
|
||||||
|
|
||||||
|
// 触发点击下载
|
||||||
|
link.click();
|
||||||
|
|
||||||
|
// 释放内存
|
||||||
|
URL.revokeObjectURL(link.href);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "~@/style.less";
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: inline-block;
|
||||||
|
width: 62vw;
|
||||||
|
//height: 20.1vw;
|
||||||
|
margin-top: 3.7vw;
|
||||||
|
margin-bottom: 5.2vw;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.fileCard {
|
||||||
|
display: inline-block;
|
||||||
|
width: 40%;
|
||||||
|
height: 100px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 1vw;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.cardTitle {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 20px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 45px;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
white-space: nowrap; /* 不换行 */
|
||||||
|
overflow: hidden; /* 超出部分隐藏 */
|
||||||
|
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardValue {
|
||||||
|
position: absolute;
|
||||||
|
top: 55px;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
left: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 45px;
|
||||||
|
color: #aaa;
|
||||||
|
white-space: nowrap; /* 不换行 */
|
||||||
|
overflow: hidden; /* 超出部分隐藏 */
|
||||||
|
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.downIcon {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<TitleGroup>
|
||||||
|
<template slot="title">CONTACT US</template>
|
||||||
|
<template slot="subTitle"> 联系我们</template>
|
||||||
|
</TitleGroup>
|
||||||
|
<div class="content">
|
||||||
|
<el-form ref="form" :inline="true" :model="form" label-width="80px" label-position="top">
|
||||||
|
<el-form-item label="联系人姓名" style="width: 45%">
|
||||||
|
<el-input v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系电话 " style="width: 45%">
|
||||||
|
<el-input v-model="form.phone"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="公司名称 " style="width: 45%">
|
||||||
|
<el-input v-model="form.company"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="咨询设备名称 " style="width: 45%">
|
||||||
|
<el-input v-model="form.deviceName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="需求信息/故障描述" style="width: 100%">
|
||||||
|
<el-input type="textarea" v-model="form.value"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<br>
|
||||||
|
<el-form-item style="text-align: center;width: 100%">
|
||||||
|
<el-button type="primary" @click="onSubmit">提交</el-button>
|
||||||
|
<el-button @click="form={}">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TitleGroup from "@/components/TitleGroup";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PlatformIntroduction',
|
||||||
|
props: ['data'],
|
||||||
|
components: {
|
||||||
|
TitleGroup
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
name: '',
|
||||||
|
region: '',
|
||||||
|
date1: '',
|
||||||
|
date2: '',
|
||||||
|
delivery: false,
|
||||||
|
type: [],
|
||||||
|
resource: '',
|
||||||
|
desc: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit() {
|
||||||
|
console.log('submit!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "~@/style.less";
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: inline-block;
|
||||||
|
width: 62vw;
|
||||||
|
//height: 20.1vw;
|
||||||
|
border: 1px solid #ccc3;
|
||||||
|
margin-top: 3.7vw;
|
||||||
|
margin-bottom: 5.2vw;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue