web期末网页设计，直接改内容就行

初看心无意，在看已动心

已于 2024-06-15 23:28:22 修改

阅读量202

点赞数 1

文章标签：前端

于 2024-06-15 23:27:27 首次发布

本文链接：https://blog.csdn.net/2201_75844255/article/details/139710754

版权

全部样式已压缩包发布，懒得搞了，自取就行

首页


.teance {
  height: 130vh;   /* 设置为视窗高度 */
  background-image: url('../../assets/imgs/55800f1b-af84-42db-8e4f-793f2c3e236c.jpg');  
  background-size: cover;  
  background-repeat: no-repeat;  
}


.teance .texe {
  width: 1100px;
  height: 420px;
  margin: 20px auto;
  border: 2px rgb(176, 15, 15) solid;
}

.teance .texe .left {
  width: 550px;
  height: 422px;
  
  float: left;
}

.teance .texe .left img {
  width: 550px;
  height: 350px;
}



.teance .texe h3 {
  padding: 5px;
  color: #CCC;
}

.teance .texe p {
  padding: 3px;
  color: #CCC;
  font-size: 6px;
}

.teance .texe .right {
  width: 510px;
  height: 400px;
  float: right;
}

.teance .texe .right img {
  width: 500px;
  height: 350px;
}

.teance .texe .pian {
  width: 500px;
  height: 280px;
  margin-right: 12px;
}



/* 轮播图 */
.carousel {  
  float:left;

  position: relative;  
  width: 20%; /* 设置轮播图容器的宽度 */  

  height: 400px; 
  margin: 20px 200px;  
  overflow: hidden;  
  border-radius: 10px; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);   
  
}  
  
.carousel-images {  
  display: flex;  
  transition: transform 0.5s ease;  
}  
  
.carousel-image {  
  flex: 0 0 100%; /* 每张图片占据整个容器的宽度 */  
  max-width: 100%;  
}  
  
.carousel-img {  
  width: 100%; /* 图片宽度与容器相同 */  
  height: auto; /* 保持图片的原始纵横比 */  
  border-radius: 10px; /* 与容器相同的圆角 */  
  object-fit: cover; /* 保持图片的完整显示，同时填充整个容器 */  
}  






/* 添加倒计时的样式 */  
.countdown {  
  float: right;
  margin-top: -400px; 
  margin-right: 100px;
  text-align: center;  
  font-size: 20px;
  color: #780505; 
}  
  
.countdown span {  
  display: inline-block;  
  margin: 0 5px; 
}

<template>  
 
    
      <div class="teance">


         <div>  
            <div class="carousel">  
             <div class="carousel-images" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">  
             <div class="carousel-image" v-for="(image, index) in images" :key="index">  
              <img :src="image" alt="Image" class="carousel-img">  
             </div>  
           </div>  
        </div> 
        
        <div style="clear: both;"></div>

        <div class="countdown">   
          <span>{{ days }}</span>天  
          <span>{{ hours }}</span>时  
          <span>{{ minutes }}</span>分  
          <span>{{ seconds }}</span>秒 
          <p>中秋节倒计时</p> 
          <div class="midium-text">  
          🌕 **中秋佳节到，明月寄相思** 🌕  
          <p>愿月圆人团圆，家家都欢喜。</p> 
          <p>愿月圆人团圆，家家都欢喜。在这美好的节日里，送上我最真挚的祝福。</p>
          <p>愿你的生活如这圆月般，圆满、明亮、充满希望！祝你中秋快乐，阖家幸福，万事如意！</p> 
          </div>
        </div> 

        <div style="clear: both;"></div>


        
       
        <div class="texe">
              <div class="left">
                  <h3>中秋佳节经典寄语</h3> 
                  <p>1、中秋之夜，月圆人团圆。无论身在何方，心中都怀揣着对家的思念和祝福。愿这轮明月能传达我对你的深深思念和美好祝愿。</p> 
                  <p>2、“抬头望明月，低头思故乡。”每当夜幕降临，看到那轮明亮的月亮，就仿佛能见到远方的亲人。愿我们都能珍惜这份团聚的温馨和幸福。</p> 
                  <p>3、中秋佳节，如同海中的明月，承载着人们的希望和祝福。无论距离有多远，只要心中有爱，就能感受到家的温暖和团圆的喜悦。</p> 
                  <p>4、“月到中秋分外明，人逢佳节倍思亲。”在这美好的夜晚，愿你我都能感受到彼此的思念和祝福，让这份情谊如月光般永恒。</p> 
                  <p>5、中秋不仅仅是一个节日，更是一种情感的寄托和传承。让我们珍惜这份传统，让爱和思念永远流传下去。</p> 
                  <p>6、在这个特别的日子里，无论身在何处，都别忘了给远方的亲人送去一份真挚的祝福。愿我们都能被这份爱所温暖和陪伴。</p> 
                  <p>7、中秋佳节，愿我们都能像那轮明月一样，无论经历多少风雨和坎坷，都能保持明亮和圆满。愿我们的生活也如此美好和幸福。</p>
              </div>  
                  
              <div class="right">
                  <h3>月圆人团圆，谁解中秋情！</h3> 
                  <P>中秋之夜，是这轮明月下最寄托情感的时刻了吧？</P>
                  <video class="pian" src="../../../public/videos/5c5c1bb4ab7b456b02830def69c7adbf.mp4" controls loop></video>  
              </div>
        </div>
      </div>
  </div>  
</template>  
  
<script>  
export default {  
  data() {  

    const endDate = new Date('2024-09-16T23:59:59');
    return {  

      

      images: [  
        
        '/皓月当空.jpg',
        '/中秋共赏.png',
        '/彩灯璀璨.jpeg',  
        '/桂香秋韵.jpg',  
        '/中秋共赏.png',  
        
      ],  
      currentIndex: 0,  

      endDate: endDate, // 将结束时间存储在data中  
      // 倒计时相关变量  
      days: 0,  
      hours: 0,  
      minutes: 0,  
      seconds: 0,
    };  
  },  
  mounted() {  
    this.startCarousel();  

    this.startCountdown(); // 启动倒计时 
  },  


  beforeDestroy() {  
    clearInterval(this.carouselInterval);  

    clearInterval(this.countdownInterval); // 清除倒计时定时器 
  },  


  methods: {  
    startCarousel() {  
      this.carouselInterval = setInterval(() => {  
        this.currentIndex = (this.currentIndex + 1) % this.images.length;  
      }, 3000); // 3秒切换一次图片  
    }, 
    
    
    startCountdown() {  
      this.countdownInterval = setInterval(() => {  
        const now = new Date();  
        const distance = this.endDate - now;  
  
        // 计算时间差  
        this.days = Math.floor(distance / (1000 * 60 * 60 * 24));  
        this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  
        this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));  
        this.seconds = Math.floor((distance % (1000 * 60)) / 1000);  
  
        // 如果倒计时结束，停止定时器  
        if (distance <= 0) {  
          clearInterval(this.countdownInterval);  
          this.days = 0;  
          this.hours = 0;  
          this.minutes = 0;  
          this.seconds = 0;  
        }  
      }, 1000); // 每秒更新一次倒计时  
    },  
  },  
};  
</script>  

<style src="@/assets/css/MoonView.css" scoped>  

</style>