|
|
@ -5,19 +5,19 @@ |
|
|
|
{{projectList[pattern].title}} |
|
|
|
{{projectList[pattern].title}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content_one_text"> |
|
|
|
<div class="content_one_text"> |
|
|
|
<div class="principle_wrap"> |
|
|
|
<div class="principle_wrap text_wrap"> |
|
|
|
<div class="one_title">实验原理:</div> |
|
|
|
<div class="one_title">实验原理:</div> |
|
|
|
<div class="one_text"> |
|
|
|
<div class="one_text"> |
|
|
|
{{projectList[pattern].principle}} |
|
|
|
{{projectList[pattern].principle}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="step_wrap"> |
|
|
|
<div class="step_wrap text_wrap"> |
|
|
|
<div class="one_title">实验步骤:</div> |
|
|
|
<div class="one_title">实验步骤:</div> |
|
|
|
<div class="one_text"> |
|
|
|
<div class="one_text"> |
|
|
|
{{projectList[pattern].step}} |
|
|
|
{{projectList[pattern].step}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="prepare_wrap"> |
|
|
|
<div class="prepare_wrap text_wrap"> |
|
|
|
<div class="one_title">实验准备:</div> |
|
|
|
<div class="one_title">实验准备:</div> |
|
|
|
<div class="one_text"> |
|
|
|
<div class="one_text"> |
|
|
|
{{projectList[pattern].prepare}} |
|
|
|
{{projectList[pattern].prepare}} |
|
|
@ -63,7 +63,7 @@ export default { |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
mounted(){ |
|
|
|
this.patternId = this.$route.query.type |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
toIndex() { |
|
|
|
toIndex() { |
|
|
@ -104,71 +104,85 @@ export default { |
|
|
|
.wrap{ |
|
|
|
.wrap{ |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
// display: flex; |
|
|
|
font-family: '微软雅黑'; |
|
|
|
font-family: '微软雅黑'; |
|
|
|
} |
|
|
|
} |
|
|
|
.content_one{ |
|
|
|
.content_one{ |
|
|
|
// margin-top: 60px; |
|
|
|
// margin-top: 60px; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 900px; |
|
|
|
background: white; |
|
|
|
|
|
|
|
// height: 600px; |
|
|
|
// background: red; |
|
|
|
// background: red; |
|
|
|
background: url('../../assets/img/content.jpg'); |
|
|
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
|
|
.content_one_title{ |
|
|
|
.content_one_title{ |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 130px; |
|
|
|
height: 100px; |
|
|
|
line-height: 130px; |
|
|
|
line-height: 100px; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
font-size: 50px; |
|
|
|
font-size: 50px; |
|
|
|
letter-spacing:8px; |
|
|
|
letter-spacing:8px; |
|
|
|
font-weight: 550; |
|
|
|
font-weight: 550; |
|
|
|
color: white; |
|
|
|
color: #FF5288; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content_one_text{ |
|
|
|
|
|
|
|
width: 95%; |
|
|
|
|
|
|
|
margin: auto; |
|
|
|
|
|
|
|
background-size: 100% ; |
|
|
|
|
|
|
|
border-radius: 20px; |
|
|
|
|
|
|
|
height: 400px; |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
background: url('../../assets/img/content.jpg'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.text_wrap{ |
|
|
|
|
|
|
|
display: flex; |
|
|
|
.one_title{ |
|
|
|
.one_title{ |
|
|
|
width: 280px; |
|
|
|
width: 280px; |
|
|
|
height: 40px; |
|
|
|
height: 130px; |
|
|
|
line-height: 40px; |
|
|
|
line-height: 130px; |
|
|
|
font-size: 25px; |
|
|
|
font-size: 28px; |
|
|
|
color: #FF5288; |
|
|
|
color: #FF5288; |
|
|
|
letter-spacing:4px; |
|
|
|
letter-spacing:4px; |
|
|
|
padding-left: 100px; |
|
|
|
padding-left: 100px; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
font-weight: 550; |
|
|
|
font-weight: 550; |
|
|
|
border-radius: 0px 20px 20px 0px; |
|
|
|
// border-radius: 0px 20px 20px 0px; |
|
|
|
background: white; |
|
|
|
// background: white; |
|
|
|
} |
|
|
|
} |
|
|
|
.one_text{ |
|
|
|
.one_text{ |
|
|
|
width: 900px; |
|
|
|
width: 1500px; |
|
|
|
height: 200px; |
|
|
|
height: 130px; |
|
|
|
padding: 45px 60px; |
|
|
|
padding: 45px 0px; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
// background: red; |
|
|
|
// background: red; |
|
|
|
font-size: 23px; |
|
|
|
font-size: 23px; |
|
|
|
line-height: 1.5; |
|
|
|
line-height: 2; |
|
|
|
color: white; |
|
|
|
color: #4D4D4F; |
|
|
|
letter-spacing:2px; |
|
|
|
letter-spacing:2px; |
|
|
|
font-weight: 60; |
|
|
|
font-weight: 60; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pattern_wrap{ |
|
|
|
.pattern_wrap{ |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
// height: 150px; |
|
|
|
// height: 150px; |
|
|
|
// background: red; |
|
|
|
// background: red; |
|
|
|
border-top: 2px solid #FF5288; |
|
|
|
// border-top: 2px solid #FF5288; |
|
|
|
padding: 0px 100px; |
|
|
|
padding: 0px 100px; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-top: 80px; |
|
|
|
// margin-top: 20px; |
|
|
|
.img_wrap{ |
|
|
|
.img_wrap{ |
|
|
|
margin-top: 30px; |
|
|
|
margin-top: 30px; |
|
|
|
width: 500px; |
|
|
|
width: 500px; |
|
|
|
height: 380px; |
|
|
|
height: 370px; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75); |
|
|
|
box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75); |
|
|
|
-webkit-box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75); |
|
|
|
-webkit-box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75); |
|
|
|
-moz-box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75); |
|
|
|
-moz-box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75); |
|
|
|
margin-bottom: 80px; |
|
|
|
// margin-bottom: 10px; |
|
|
|
font-size: 23px; |
|
|
|
font-size: 23px; |
|
|
|
color: #FF5288; |
|
|
|
color: #FF5288; |
|
|
|
font-weight: 550; |
|
|
|
font-weight: 550; |
|
|
@ -178,6 +192,7 @@ export default { |
|
|
|
box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75); |
|
|
|
box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75); |
|
|
|
-webkit-box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75); |
|
|
|
-webkit-box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75); |
|
|
|
-moz-box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75); |
|
|
|
-moz-box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75); |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
img{ |
|
|
|
img{ |
|
|
|
opacity: 0.9; |
|
|
|
opacity: 0.9; |
|
|
|
|
|
|
|
|
|
|
|