|  | @@ -10,93 +10,94 @@
 | 
	
		
			
				|  |  |    </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  <script lang="ts" setup>
 | 
	
		
			
				|  |  | -defineProps<{ title: string; visible: boolean }>();
 | 
	
		
			
				|  |  | -const emit = defineEmits(['close', 'click']);
 | 
	
		
			
				|  |  | +  defineProps<{ title: string; visible: boolean }>();
 | 
	
		
			
				|  |  | +  const emit = defineEmits(['close', 'click']);
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -function closeModel() {
 | 
	
		
			
				|  |  | -  emit('close');
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -function clickHandler() {
 | 
	
		
			
				|  |  | -  emit('click');
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | +  function closeModel() {
 | 
	
		
			
				|  |  | +    emit('close');
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  function clickHandler() {
 | 
	
		
			
				|  |  | +    emit('click');
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  |  <style lang="less" scoped>
 | 
	
		
			
				|  |  | -@import '/@/design/theme.less';
 | 
	
		
			
				|  |  | +  @import '/@/design/theme.less';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  @{theme-deepblue} {
 | 
	
		
			
				|  |  | +    .module-content {
 | 
	
		
			
				|  |  | +      --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left2.png');
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -@{theme-deepblue} {
 | 
	
		
			
				|  |  |    .module-content {
 | 
	
		
			
				|  |  |      --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left2.png');
 | 
	
		
			
				|  |  | +    --bg-height: 40px;
 | 
	
		
			
				|  |  | +    color: #fff;
 | 
	
		
			
				|  |  | +    box-sizing: border-box;
 | 
	
		
			
				|  |  | +    position: absolute;
 | 
	
		
			
				|  |  | +    width: 100%;
 | 
	
		
			
				|  |  | +    height: 100%;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  .title {
 | 
	
		
			
				|  |  | +    font-size: 14px;
 | 
	
		
			
				|  |  | +    font-weight: 500;
 | 
	
		
			
				|  |  | +    color: #fff;
 | 
	
		
			
				|  |  | +    float: right;
 | 
	
		
			
				|  |  | +    padding-right: 25px;
 | 
	
		
			
				|  |  | +    line-height: 30px;
 | 
	
		
			
				|  |  | +    font-family: 'douyuFont';
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  .module-content__title__expand {
 | 
	
		
			
				|  |  | +    width: 100%;
 | 
	
		
			
				|  |  | +    height: var(--bg-height);
 | 
	
		
			
				|  |  | +    background: var(--image-model_original_title_bg) no-repeat;
 | 
	
		
			
				|  |  | +    background-size: 100% 100%;
 | 
	
		
			
				|  |  | +    position: relative;
 | 
	
		
			
				|  |  | +    text-align: center;
 | 
	
		
			
				|  |  | +    line-height: var(--bg-height);
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -.module-content {
 | 
	
		
			
				|  |  | -  --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left2.png');
 | 
	
		
			
				|  |  | -  --bg-height: 40px;
 | 
	
		
			
				|  |  | -  color: #fff;
 | 
	
		
			
				|  |  | -  box-sizing: border-box;
 | 
	
		
			
				|  |  | -  position: absolute;
 | 
	
		
			
				|  |  | -  width: 100%;
 | 
	
		
			
				|  |  | -  height: 100%;
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -.title {
 | 
	
		
			
				|  |  | -  font-size: 14px;
 | 
	
		
			
				|  |  | -  font-weight: 500;
 | 
	
		
			
				|  |  | -  color: #fff;
 | 
	
		
			
				|  |  | -  float: right;
 | 
	
		
			
				|  |  | -  padding-right: 25px;
 | 
	
		
			
				|  |  | -  line-height: 30px;    font-family: 'douyuFont';
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -.module-content__title__expand {
 | 
	
		
			
				|  |  | -  width: 100%;
 | 
	
		
			
				|  |  | -  height: var(--bg-height);
 | 
	
		
			
				|  |  | -  background: var(--image-model_original_title_bg) no-repeat;
 | 
	
		
			
				|  |  | -  background-size: 100% 100%;
 | 
	
		
			
				|  |  | -  position: relative;
 | 
	
		
			
				|  |  | -  text-align: center;
 | 
	
		
			
				|  |  | -  line-height: var(--bg-height);
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -// .module-content__title {
 | 
	
		
			
				|  |  | -//   width: 50%;
 | 
	
		
			
				|  |  | -//   height: var(--bg-height);
 | 
	
		
			
				|  |  | -//   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
 | 
	
		
			
				|  |  | -//   background-size: 100% 100%;
 | 
	
		
			
				|  |  | -//   position: relative;
 | 
	
		
			
				|  |  | -//   text-align: right;
 | 
	
		
			
				|  |  | -//   padding: 4px 10% 0 0;
 | 
	
		
			
				|  |  | -// }
 | 
	
		
			
				|  |  | +  // .module-content__title {
 | 
	
		
			
				|  |  | +  //   width: 50%;
 | 
	
		
			
				|  |  | +  //   height: var(--bg-height);
 | 
	
		
			
				|  |  | +  //   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
 | 
	
		
			
				|  |  | +  //   background-size: 100% 100%;
 | 
	
		
			
				|  |  | +  //   position: relative;
 | 
	
		
			
				|  |  | +  //   text-align: right;
 | 
	
		
			
				|  |  | +  //   padding: 4px 10% 0 0;
 | 
	
		
			
				|  |  | +  // }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -// 固定在父容器右上角的按钮图标
 | 
	
		
			
				|  |  | -// .action-btn {
 | 
	
		
			
				|  |  | -//   width: 18px;
 | 
	
		
			
				|  |  | -//   height: 18px;
 | 
	
		
			
				|  |  | -//   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
 | 
	
		
			
				|  |  | -//   position: absolute;
 | 
	
		
			
				|  |  | -//   right: 0;
 | 
	
		
			
				|  |  | -//   top: 0;
 | 
	
		
			
				|  |  | -// }
 | 
	
		
			
				|  |  | -// .close-btn {
 | 
	
		
			
				|  |  | -//   transform: rotate(-90deg);
 | 
	
		
			
				|  |  | -// }
 | 
	
		
			
				|  |  | +  // 固定在父容器右上角的按钮图标
 | 
	
		
			
				|  |  | +  // .action-btn {
 | 
	
		
			
				|  |  | +  //   width: 18px;
 | 
	
		
			
				|  |  | +  //   height: 18px;
 | 
	
		
			
				|  |  | +  //   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
 | 
	
		
			
				|  |  | +  //   position: absolute;
 | 
	
		
			
				|  |  | +  //   right: 0;
 | 
	
		
			
				|  |  | +  //   top: 0;
 | 
	
		
			
				|  |  | +  // }
 | 
	
		
			
				|  |  | +  // .close-btn {
 | 
	
		
			
				|  |  | +  //   transform: rotate(-90deg);
 | 
	
		
			
				|  |  | +  // }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -.module-slot {
 | 
	
		
			
				|  |  | -  height: calc(100% - 33px);
 | 
	
		
			
				|  |  | -  width: calc(100% - 20px);
 | 
	
		
			
				|  |  | -  backdrop-filter: blur(5px);
 | 
	
		
			
				|  |  | -  margin-left: 10px;
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | +  .module-slot {
 | 
	
		
			
				|  |  | +    height: calc(100% - 33px);
 | 
	
		
			
				|  |  | +    width: calc(100% - 20px);
 | 
	
		
			
				|  |  | +    backdrop-filter: blur(5px);
 | 
	
		
			
				|  |  | +    margin-left: 10px;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -// Transition动画相关
 | 
	
		
			
				|  |  | -.v-enter-active,
 | 
	
		
			
				|  |  | -.v-leave-active {
 | 
	
		
			
				|  |  | -  transition: all 0.3s ease;
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | +  // Transition动画相关
 | 
	
		
			
				|  |  | +  .v-enter-active,
 | 
	
		
			
				|  |  | +  .v-leave-active {
 | 
	
		
			
				|  |  | +    transition: all 0.3s ease;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -.v-enter-from,
 | 
	
		
			
				|  |  | -.v-leave-to {
 | 
	
		
			
				|  |  | -  // opacity: 1;
 | 
	
		
			
				|  |  | -  transform: translateX(-100%);
 | 
	
		
			
				|  |  | -  // transform: scaleY(0);
 | 
	
		
			
				|  |  | -  // transform-origin: center top;
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | +  .v-enter-from,
 | 
	
		
			
				|  |  | +  .v-leave-to {
 | 
	
		
			
				|  |  | +    // opacity: 1;
 | 
	
		
			
				|  |  | +    transform: translateX(-100%);
 | 
	
		
			
				|  |  | +    // transform: scaleY(0);
 | 
	
		
			
				|  |  | +    // transform-origin: center top;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  |  </style>
 |