Skip to content

X
x-training
提交 04d5f0ca authored 作者: 高一's avatar 高一
浏览文件
操作

案例分析案例背景完成

上级 3ba134a6
显示空白字符变更
内嵌 并排
正在显示 包含 361 行增加 和 4 行删除
src/components/AppContainer.vue
浏览文件 @ 04d5f0ca
<template>
<div class="app-container">
<div class="app-container-hd" v-if="title">
<slot name="header">
<div class="app-container-hd__title">{{ title }}</div>
</slot>
</div>
<div class="app-container-bd">
<slot></slot>
......
src/pages/yhfq/albj/index.vue
浏览文件 @ 04d5f0ca
<template>
<app-container title="请选择您要进入的案例背景">
内容区
<it-em>
<template v-slot:title>
<div>
<img src="../../../assets/images/gsxx.png" alt="" srcset="">
<p>案例分析1</p>
</div>
</template>
<template v-slot:xm>
<div>姓名</div>
<div>立马</div>
</template>
<template v-slot:gs>
<div>公司</div>
<div>建国保险公司</div>
</template>
<template v-slot:bm>
<div>部门</div>
<div>市场营销部</div>
</template>
<template v-slot:zw>
<div>职位</div>
<div>市场营销专员</div>
</template>
<template v-slot:cp>
<div>营销产品</div>
<div>建国重疾险</div>
</template>
</it-em>
<it-em>
<template v-slot:title>
<div>
<img src="../../../assets/images/gsxx.png" alt="" srcset="">
<p>案例分析2</p>
</div>
</template>
<template v-slot:xm>
<div>姓名</div>
<div>立马</div>
</template>
<template v-slot:gs>
<div>公司</div>
<div>建国保险公司</div>
</template>
<template v-slot:bm>
<div>部门</div>
<div>市场营销部</div>
</template>
<template v-slot:zw>
<div>职位</div>
<div>市场营销专员</div>
</template>
<template v-slot:cp>
<div>营销产品</div>
<div>建国重疾险</div>
</template>
</it-em>
<it-em>
<template v-slot:title>
<div>
<img src="../../../assets/images/gsxx.png" alt="" srcset="">
<p>案例分析3</p>
</div>
</template>
<template v-slot:xm>
<div>姓名</div>
<div>立马</div>
</template>
<template v-slot:gs>
<div>公司</div>
<div>建国保险公司</div>
</template>
<template v-slot:bm>
<div>部门</div>
<div>市场营销部</div>
</template>
<template v-slot:zw>
<div>职位</div>
<div>市场营销专员</div>
</template>
<template v-slot:cp>
<div>营销产品</div>
<div>建国重疾险</div>
</template>
</it-em>
<template #footer>
<div class="app-container-ft">
<el-button type="primary" size="mini">开始实训</el-button>
......@@ -15,10 +98,21 @@
<script>
import AppContainer from '@/components/AppContainer'
import ItEm from './item.vue'
export default {
components: { AppContainer },
components: { AppContainer, ItEm },
data() {
return {}
}
}
</script>
<style scoped lang="scss">
app-container {
overflow: hidden;
// it-em {
// float: left;
// margin-right: 20px;
// }
}
</style>
src/pages/yhfq/albj/item.vue 0 → 100644
浏览文件 @ 04d5f0ca
<template>
<div class="main" ref="main" @click="clk()">
<div class="head">
<slot name="title"></slot>
</div>
<slot name="content"></slot>
<ul>
<li>
<slot name="xm"></slot>
</li>
<div class="line"></div>
<li>
<slot name="gs"></slot>
</li>
<div class="line"></div>
<li>
<slot name="bm"></slot>
</li>
<div class="line"></div>
<li>
<slot name="zw"></slot>
</li>
<div class="line"></div>
<li>
<slot name="cp"></slot>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
flag: false
}
},
methods: {
clk() {
this.flag = !this.flag
if (this.flag) {
this.$refs.main.id = 'clk'
} else {
this.$refs.main.id = ''
}
}
}
}
</script>
<style scoped lang="scss">
.main {
float: left;
margin-right: 20px;
width: 228px;
height: 344px;
background: #ffffff;
box-shadow: 0px 2px 10px 0px rgba(88, 111, 174, 0.1);
border-radius: 6px;
overflow: hidden;
.head {
width: 228px;
height: 81px;
line-height: 81px;
// background: #000000;
opacity: 0.9;
text-align: center;
div {
width: 100%;
height: 100%;
position: relative;
p {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
z-index: 999999;
}
}
}
ul {
width: 100%;
height: 263px;
display: flex;
flex-direction: column;
li {
width: 100%;
flex: 1;
display: flex;
div {
flex: 0.7;
display: flex;
align-items: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
letter-spacing: 1px;
margin-right: 1px;
padding-left: 10px;
box-sizing: border-box;
}
div:nth-child(2) {
flex: 1;
margin-right: 0px;
}
}
.line {
margin-top: 2px;
margin-left: 50%;
transform: translateX(-50%);
width: 212px;
height: 1px;
background: #eeeeee;
}
}
}
.main:hover {
box-shadow: 0px 8px 16px 0px rgba(88, 111, 174, 0.3);
}
#clk {
box-shadow: 0px 8px 16px 0px rgba(192, 21, 64, 0.4);
border: 1px solid #C01540;
}
</style>
src/pages/yhfq/alfx/index.vue
浏览文件 @ 04d5f0ca
<template>
<app-container title="案例分析"> 案例分析 </app-container>
<app-container title="案例分析">
<template #header>
<img style="cursor:pointer" src="../../../assets/images/out.png" alt="" srcset="" />
</template>
<it-em>
<template v-slot:title>
<div>
<img src="../../../assets/images/gsxx.png" alt="" srcset="">
<p>公司信息</p>
</div>
</template>
<template v-slot:content>
们反整造布报该效以约三南真内斯属片理写农基解日应各数备等音史区叫信快林无积立包与法类题方极到结才月中听全三原主干前当百片身相表。完值面经市确验心究知水位本口派究料在使和之思查而压被力没斯该行和要难最酸外品完口走厂形务群按维不济有导适次的报心育采之半正派任主合还。
</template>
</it-em>
<it-em>
<template v-slot:title>
<div>
<img src="../../../assets/images/cpxx.png" alt="" srcset="">
<p>产品信息</p>
</div>
</template>
<template v-slot:content>
们反整造布报该效以约三南真内斯属片理写农基解日应各数备等音史区叫信快林无积立包与法类题方极到结才月中听全三原主干前当百片身相表。完值面经市确验心究知水位本口派究料在使和之思查而压被力没斯该行和要难最酸外品完口走厂形务群按维不济有导适次的报心育采之半正派任主合还。
</template>
</it-em>
<it-em>
<template v-slot:title>
<div>
<img src="../../../assets/images/zwxx.png" alt="" srcset="">
<p>职位信息</p>
</div>
</template>
<template v-slot:content>
们反整造布报该效以约三南真内斯属片理写农基解日应各数备等音史区叫信快林无积立包与法类题方极到结才月中听全三原主干前当百片身相表。完值面经市确验心究知水位本口派究料在使和之思查而压被力没斯该行和要难最酸外品完口走厂形务群按维不济有导适次的报心育采之半正派任主合还。
</template>
</it-em>
<template #footer>
<div class="app-container-ft">
<el-button type="primary" size="mini">开始实训</el-button>
</div>
</template>
</app-container>
</template>
<script>
import AppContainer from '@/components/AppContainer'
import ItEm from './item.vue'
export default {
components: { AppContainer },
components: { AppContainer, ItEm },
data() {
return {}
}
......
src/pages/yhfq/alfx/item.vue 0 → 100644
浏览文件 @ 04d5f0ca
<template>
<div class="main" ref="main" @click="clk()">
<div class="head">
<slot name="title"></slot>
</div>
<div class="bottom">
<slot name='content'></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
flag: false
}
},
methods: {
clk() {
this.flag = !this.flag
if (this.flag) {
this.$refs.main.id = 'clk'
} else {
this.$refs.main.id = ''
}
}
}
}
</script>
<style scoped lang="scss">
.main {
float: left;
margin-right: 20px;
width: 228px;
height: 344px;
background: #ffffff;
box-shadow: 0px 2px 10px 0px rgba(88, 111, 174, 0.1);
border-radius: 6px;
overflow: hidden;
.head {
width: 228px;
height: 81px;
line-height: 81px;
opacity: 0.9;
text-align: center;
overflow: hidden;
div {
width: 100%;
height: 100%;
position: relative;
p {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
z-index: 999999;
}
}
}
.bottom {
padding-left: 10px;
padding-top: 10px;
padding-right: 5px;
box-sizing: border-box;
width: 100%;
height: 263px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 22px;
letter-spacing: 1px;
}
}
.main:hover {
box-shadow: 0px 8px 16px 0px rgba(88, 111, 174, 0.3);
}
#clk {
box-shadow: 0px 8px 16px 0px rgba(192, 21, 64, 0.4);
border: 1px solid #C01540;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论