|
@@ -0,0 +1,49 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <img :src="img" class="img" width="100%" alt />
|
|
|
+ <div class="box" :style="{height: scrollerHeight}">
|
|
|
+ <div :style="{height: scrollerHeight}"></div>
|
|
|
+ <div :style="{height: scrollerHeight}"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ img: require("@/assets/images/teacherLi.png")
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ scrollerHeight(){
|
|
|
+ if( 1334/750*window.screen.width - window.screen.height<0){
|
|
|
+ return parseInt (Math.abs(1334/750*window.screen.width - window.screen.height))+'px'
|
|
|
+ }else {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.img {
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
+.box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+ div {
|
|
|
+ &:nth-child(1){
|
|
|
+ background-color: #F9D5DF;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ background-color: #D8EAF9;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|