• 简单漂亮的首页

    效果图

     

    说明 

        这个首页我也是构思了很久，才想出这个界面，大家喜欢的话，可以拿走去使用

    技术的话，采用的就是vue的语法，但是不影响，很多样式我都是直接手敲出来的

    代码实现

    标语

    1.  
    2.     <div class="text">
    3.       <p><span>Do something you love.span>p>
    4.       <p>"Success is not final, failure is not fatal: it is the courage to continue that counts."p>
    5.       
    6.     div>
    7.     
    1. .text {
    2.     padding-top: 300px;
    3.     text-align: center;
    4.     height: 600px;
    5.  
    6.     p {
    7.       color: #dbedf2;
    8.       font-size: 28px;
    9.       margin-bottom: 20px;
    10.  
    11.       span {
    12.         font-size: 50px;
    13.         color: white;
    14.       }
    15.     }
    16.   }

     

    卡片

    1.  <!-- 卡片 start-->
    2.     <div class="card">
    3.       <!-- 卡片列表 start-->
    4.       <div class="card-list">
    5.         <div class="card-item">
    6.           <el-icon class="card-icon" size="80px">
    7.             <Sunny/>
    8.           </el-icon>
    9.           <p><span>{{ cardList[0].title }}</span></p>
    10.           <p>{{ cardList[0].content }}</p>
    11.           <button>{{ cardList[0].button }}</button>
    12.         </div>
    13.         <div class="card-item">
    14.           <el-icon class="card-icon" size="80px">
    15.             <Ship/>
    16.           </el-icon>
    17.           <p><span>{{ cardList[1].title }}</span></p>
    18.           <p>{{ cardList[1].content }}</p>
    19.           <button>{{ cardList[1].button }}</button>
    20.         </div>
    21.         <div class="card-item">
    22.           <el-icon class="card-icon" size="80px">
    23.             <Sunrise/>
    24.           </el-icon>
    25.           <p><span>{{ cardList[2].title }}</span></p>
    26.           <p>{{ cardList[2].content }}</p>
    27.           <button>{{ cardList[2].button }}</button>
    28.         </div>
    29.       </div>
    30.       <!-- 卡片列表 end-->
    31.       <!-- 斜块 start-->
    32.       <div class="tilt"></div>
    33.       <!-- 斜块 start-->
    34.       <!-- 视频 start-->
    35.       <div class="video">
    36.         <p>WATCH THE VIDEO</p>
    37.         <el-icon @click="videoActive=!videoActive" class="video-icon">
    38.           <VideoPlay/>
    39.         </el-icon>
    40.         <el-dialog v-model="videoActive" show-close>
    41.           <vue3VideoPlay v-bind="options"/>
    42.         </el-dialog>
    43.       </div>
    44.       <!-- 视频 start-->
    45.     </div>
    46.     <!-- 卡片 end-->
    1. .card {
    2.     .tilt {
    3.       background-color: #fff;
    4.       height: 750px;
    5.       transform: skewY(-1.5deg); /* 使顶部向左倾斜10度 */
    6.     }
    7.  
    8.     .card-list {
    9.       margin-left: 10%;
    10.       position: absolute;
    11.       z-index: 9;
    12.       margin-top: -100px;
    13.       display: flex;
    14.  
    15.       .card-item {
    16.         background-color: #fff;
    17.         height: 400px;
    18.         width: 400px;
    19.         box-shadow: 7px 14px 42px 3px rgb(163 174 184 / 40%);
    20.  
    21.         .card-icon {
    22.           margin-top: 40px;
    23.           margin-left: 41%;
    24.           color: #52d3aa;
    25.         }
    26.  
    27.         p {
    28.           text-align: center;
    29.           line-height: 30px;
    30.           font-size: 17px;
    31.           margin-top: 20px;
    32.           margin-left: 10%;
    33.           margin-right: 10%;
    34.  
    35.           span {
    36.             font-size: 28px;
    37.           }
    38.         }
    39.  
    40.         button {
    41.           margin-top: 20px;
    42.           margin-left: 30%;
    43.           width: 40%;
    44.           border-radius: 5px;
    45.           background: #52d3aa;
    46.           color: #fff;
    47.           border: none !important;
    48.           border: 10px solid transparent !important;
    49.           text-transform: uppercase;
    50.           letter-spacing: 2px;
    51.  
    52.         }
    53.  
    54.         button:hover {
    55.           cursor: pointer;
    56.           background: #fff;
    57.           color: #52d3aa;
    58.         }
    59.       }
    60.  
    61.       .card-item:hover {
    62.         background-image: url("@/assets/image/背景图片/img_7.jpg");
    63.         background-size: cover;
    64.         color: #fff;
    65.  
    66.         .card-icon {
    67.           color: #fff !important;
    68.         }
    69.  
    70.       }
    71.     }
    72.  
    73.     .video {
    74.       position: absolute;
    75.       z-index: 9;
    76.       margin-top: -340px;
    77.       margin-left: 38%;
    78.  
    79.       p {
    80.         font-size: 24px;
    81.         font-weight: bolder;
    82.         color: #7f7f7f;
    83.       }
    84.  
    85.       .video-icon {
    86.         margin-top: 30px;
    87.         margin-left: 40px;
    88.         font-size: 150px;
    89.         color: #52d3aa;
    90.       }
    91.  
    92.       .video-icon:hover {
    93.         cursor: pointer;
    94.         font-size: 153px;
    95.       }
    96.     }
    97.   }

    图片墙

    1. <!-- 图片墙 start-->
    2.     <div class="work">
    3.       <div class="work-title">
    4.         <p><span>图片墙</span></p>
    5.         <hr/>
    6.         <p>
    7.           图片墙记录着我们团队的欢笑、汗水和努力。在这里，你可以看到我们团队成员充满激情地合作、创新和研发出优秀的产品。这些照片展示了多元化的团队文化，我们鼓励员工发挥创造力，分享彼此的成功和成长。
    8.         </p>
    9.       </div>
    10.       <div class="picture-list">
    11.         <div @click="showImage(index)" class="picture-item" v-for="(item,index) in imgList.list" :key="index">
    12.           <el-image class="image" fit="cover" :src="item.bannerUrl"></el-image>
    13.           <p><span>{{ item.bannerData1 }}</span></p>
    14.           <p>{{ item.bannerData2 }}</p>
    15.         </div>
    16.         <el-dialog v-model="showImageActive">
    17.           <el-image style="width: 100%;height: 500px;border-radius: 5px" fit="cover"
    18.                     :src="imgDesc.bannerUrl"></el-image>
    19.         </el-dialog>
    20.       </div>
    21.     </div>
    22.     <!-- 图片墙 end-->
    1. .work {
    2.     margin-top: 100px;
    3.     margin-bottom: 300px;
    4.  
    5.     .work-title {
    6.       text-align: center;
    7.       margin-left: 25%;
    8.       margin-right: 25%;
    9.  
    10.       p {
    11.         color: #daedf7;
    12.         font-size: 25px;
    13.         line-height: 50px;
    14.  
    15.         span {
    16.           color: #ffffff;
    17.           font-size: 50px;
    18.  
    19.         }
    20.       }
    21.  
    22.       hr {
    23.         margin-top: 30px;
    24.         margin-bottom: 30px;
    25.         width: 4%;
    26.       }
    27.     }
    28.  
    29.     .picture-list {
    30.       margin-top: 100px;
    31.       margin-left: 10%;
    32.       width: 100%;
    33.       display: flex;
    34.       flex-wrap: wrap; //自动换行
    35.  
    36.       .picture-item {
    37.         border-radius: 8px;
    38.         background-color: #fff;
    39.         height: 370px;
    40.         width: 370px;
    41.         margin: 20px;
    42.  
    43.         .image {
    44.           border-radius: 8px 8px 0 0;
    45.           height: 300px;
    46.           width: 100%;
    47.         }
    48.  
    49.         p {
    50.           text-align: center;
    51.           line-height: 30px;
    52.           color: #b3b3b3;
    53.           font-size: 16px;
    54.  
    55.           span {
    56.             font-weight: bolder;
    57.             color: #000000;
    58.           }
    59.  
    60.           span:hover {
    61.             color: #57d4ac;
    62.           }
    63.         }
    64.  
    65.       }
    66.  
    67.       .picture-item:hover {
    68.         box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    69.         margin-top: -1px;
    70.         cursor: pointer;
    71.       }
    72.     }
    73.   }

    理念

    1.   <!-- 理念 start-->
    2.     <div class="evaluate">
    3.       <!-- 斜块 start-->
    4.       <div class="tilt"></div>
    5.       <!-- 斜块 start-->
    6.       <div class="title">
    7.         <p><span>理念</span></p>
    8.         <hr color="#52d3aa">
    9.         <p>我们的理念是通过技术与人文的结合，解决现实生活中的问题，推动社会的进步和发展。</p>
    10.         <p>
    11.           我们相信，现代互联网技术可以拓展人类的视野，打破地域的限制，让人们更加便捷地获取信息、交流和合作。通过创新，我们为客户提供前瞻性的产品和服务，帮助他们在激烈的市场竞争中脱颖而出。</p>
    12.       </div>
    13.     </div>
    14.     <!-- 理念 end-->
    1. .work {
    2.     margin-top: 100px;
    3.     margin-bottom: 300px;
    4.  
    5.     .work-title {
    6.       text-align: center;
    7.       margin-left: 25%;
    8.       margin-right: 25%;
    9.  
    10.       p {
    11.         color: #daedf7;
    12.         font-size: 25px;
    13.         line-height: 50px;
    14.  
    15.         span {
    16.           color: #ffffff;
    17.           font-size: 50px;
    18.  
    19.         }
    20.       }
    21.  
    22.       hr {
    23.         margin-top: 30px;
    24.         margin-bottom: 30px;
    25.         width: 4%;
    26.       }
    27.     }
    28.  
    29.     .picture-list {
    30.       margin-top: 100px;
    31.       margin-left: 10%;
    32.       width: 100%;
    33.       display: flex;
    34.       flex-wrap: wrap; //自动换行
    35.  
    36.       .picture-item {
    37.         border-radius: 8px;
    38.         background-color: #fff;
    39.         height: 370px;
    40.         width: 370px;
    41.         margin: 20px;
    42.  
    43.         .image {
    44.           border-radius: 8px 8px 0 0;
    45.           height: 300px;
    46.           width: 100%;
    47.         }
    48.  
    49.         p {
    50.           text-align: center;
    51.           line-height: 30px;
    52.           color: #b3b3b3;
    53.           font-size: 16px;
    54.  
    55.           span {
    56.             font-weight: bolder;
    57.             color: #000000;
    58.           }
    59.  
    60.           span:hover {
    61.             color: #57d4ac;
    62.           }
    63.         }
    64.  
    65.       }
    66.  
    67.       .picture-item:hover {
    68.         box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    69.         margin-top: -1px;
    70.         cursor: pointer;
    71.       }
    72.     }
    73.   }

    全部代码

    1. <template>
    2.   <div class="container">
    3.     
    4.     <div class="text">
    5.       <p><span>Do something you love.span>p>
    6.       <p>"Success is not final, failure is not fatal: it is the courage to continue that counts."p>
    7.       
    8.     div>
    9.     
    10.     
    11.     <div class="card">
    12.       
    13.       <div class="card-list">
    14.         <div class="card-item">
    15.           <el-icon class="card-icon" size="80px">
    16.             <Sunny/>
    17.           el-icon>
    18.           <p><span>{{ cardList[0].title }}span>p>
    19.           <p>{{ cardList[0].content }}p>
    20.           <button>{{ cardList[0].button }}button>
    21.         div>
    22.         <div class="card-item">
    23.           <el-icon class="card-icon" size="80px">
    24.             <Ship/>
    25.           el-icon>
    26.           <p><span>{{ cardList[1].title }}span>p>
    27.           <p>{{ cardList[1].content }}p>
    28.           <button>{{ cardList[1].button }}button>
    29.         div>
    30.         <div class="card-item">
    31.           <el-icon class="card-icon" size="80px">
    32.             <Sunrise/>
    33.           el-icon>
    34.           <p><span>{{ cardList[2].title }}span>p>
    35.           <p>{{ cardList[2].content }}p>
    36.           <button>{{ cardList[2].button }}button>
    37.         div>
    38.       div>
    39.       
    40.       
    41.       <div class="tilt">div>
    42.       
    43.       
    44.       <div class="video">
    45.         <p>WATCH THE VIDEOp>
    46.         <el-icon @click="videoActive=!videoActive" class="video-icon">
    47.           <VideoPlay/>
    48.         el-icon>
    49.         <el-dialog v-model="videoActive" show-close>
    50.           <vue3VideoPlay v-bind="options"/>
    51.         el-dialog>
    52.       div>
    53.       
    54.     div>
    55.     
    56.     
    57.     <div class="work">
    58.       <div class="work-title">
    59.         <p><span>图片墙span>p>
    60.         <hr/>
    61.         <p>
    62.           图片墙记录着我们团队的欢笑、汗水和努力。在这里，你可以看到我们团队成员充满激情地合作、创新和研发出优秀的产品。这些照片展示了多元化的团队文化，我们鼓励员工发挥创造力，分享彼此的成功和成长。
    63.         p>
    64.       div>
    65.       <div class="picture-list">
    66.         <div @click="showImage(index)" class="picture-item" v-for="(item,index) in imgList.list" :key="index">
    67.           <el-image class="image" fit="cover" :src="item.bannerUrl">el-image>
    68.           <p><span>{{ item.bannerData1 }}span>p>
    69.           <p>{{ item.bannerData2 }}p>
    70.         div>
    71.         <el-dialog v-model="showImageActive">
    72.           <el-image style="width: 100%;height: 500px;border-radius: 5px" fit="cover"
    73.                     :src="imgDesc.bannerUrl">el-image>
    74.         el-dialog>
    75.       div>
    76.     div>
    77.     
    78.     
    79.     <div class="evaluate">
    80.       
    81.       <div class="tilt">div>
    82.       
    83.       <div class="title">
    84.         <p><span>理念span>p>
    85.         <hr color="#52d3aa">
    86.         <p>我们的理念是通过技术与人文的结合，解决现实生活中的问题，推动社会的进步和发展。p>
    87.         <p>
    88.           我们相信，现代互联网技术可以拓展人类的视野，打破地域的限制，让人们更加便捷地获取信息、交流和合作。通过创新，我们为客户提供前瞻性的产品和服务，帮助他们在激烈的市场竞争中脱颖而出。p>
    89.       div>
    90.     div>
    91.     
    92.   div>
    93. template>
    94. <script setup>
    95. import {onMounted, reactive, ref} from "vue";
    96. import 'vue3-video-play/dist/style.css'
    97. import axios from "@/api/index";
    98. //初始化视频对话框
    99. const videoActive = ref(false)
    100. //图片
    101. const showImageActive = ref(false)
    102. //初始化卡片数据
    103. const cardList = reactive([
    104.   {
    105.     icon: '',
    106.     title: '创意',
    107.     content: '创新力是我们的翅膀，驱动我们超越边界，开创全新的未来。激发创新思维，释放潜能，让创意翻飞，颠覆现状。因为创新，所以精彩。',
    108.     button: 'originality',
    109.   },
    110.   {
    111.     icon: '',
    112.     title: '探索',
    113.     content: '在探索的旅程中，我们发现真正的力量来自于勇往直前的勇气。无畏地掌握新知识，拥抱新技术，我们追逐未知的可能性。',
    114.     button: 'explore',
    115.   },
    116.   {
    117.     icon: '',
    118.     title: '愿景',
    119.     content: '无论是在科技创新、社会变革还是环境保护的领域，我们秉持着超越极限，引领潮流的信念。在我们的愿景中，没有不可能，只有争取。',
    120.     button: 'vision',
    121.   },
    122. ])
    123. //初始化图片数据
    124. const imgList = reactive({list: []})
    125. //初始图片基础信息
    126. const imgDesc = reactive({
    127.   src: ''
    128. })
    129. //视频参数
    130. const options = reactive({
    131.   width: "720px", //播放器宽度
    132.   height: "470px", //播放器高度
    133.   color: "#409eff", //主题色
    134.   title: "测试", //视频名称
    135.   src: "http://118.31.60.184:8020/月木学途/接口测试/1.接口测试基础.mp4", //视频源
    136.   muted: false, //静音
    137.   speed: false, // 关闭进度条拖动
    138.   webFullScreen: false,
    139.   speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    140.   autoPlay: false, //自动播放
    141.   loop: false, //循环播放
    142.   mirror: false, //镜像画面
    143.   ligthOff: false, //关灯模式
    144.   volume: 0.3, //默认音量大小
    145.   control: true, //是否显示控制
    146.   controlBtns: [
    147.     "audioTrack",
    148.     "quality",
    149.     "speedRate",
    150.     "volume",
    151.     "setting",
    152.     "pip",
    153.     "pageFullScreen",
    154.     "fullScreen",
    155.   ], //显示所有按钮,
    156. });
    157. onMounted(() => {
    158.   axios.banner_findByTypeId(
    159.       {
    160.         bannerTypeId: 2
    161.       }
    162.   ).then(res => {
    163.     if (res.data.code == 200) {
    164.       imgList.list = res.data.data
    165.     }
    166.   })
    167. })
    168. /**
    169.  * 展现图片
    170.  */
    171. const showImage = (index) => {
    172.   showImageActive.value = true
    173.   imgDesc.bannerUrl = imgList.list[index].bannerUrl
    174. }
    175. script>
    176. <style scoped lang="scss">
    177. .container {
    178.   background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
    179.   background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
    180.   background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
    181.   background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
    182.   padding-bottom: 200px;
    183.  
    184.   .text {
    185.     padding-top: 300px;
    186.     text-align: center;
    187.     height: 600px;
    188.  
    189.     p {
    190.       color: #dbedf2;
    191.       font-size: 28px;
    192.       margin-bottom: 20px;
    193.  
    194.       span {
    195.         font-size: 50px;
    196.         color: white;
    197.       }
    198.     }
    199.   }
    200.  
    201.   .card {
    202.     .tilt {
    203.       background-color: #fff;
    204.       height: 750px;
    205.       transform: skewY(-1.5deg); /* 使顶部向左倾斜10度 */
    206.     }
    207.  
    208.     .card-list {
    209.       margin-left: 10%;
    210.       position: absolute;
    211.       z-index: 9;
    212.       margin-top: -100px;
    213.       display: flex;
    214.  
    215.       .card-item {
    216.         background-color: #fff;
    217.         height: 400px;
    218.         width: 400px;
    219.         box-shadow: 7px 14px 42px 3px rgb(163 174 184 / 40%);
    220.  
    221.         .card-icon {
    222.           margin-top: 40px;
    223.           margin-left: 41%;
    224.           color: #52d3aa;
    225.         }
    226.  
    227.         p {
    228.           text-align: center;
    229.           line-height: 30px;
    230.           font-size: 17px;
    231.           margin-top: 20px;
    232.           margin-left: 10%;
    233.           margin-right: 10%;
    234.  
    235.           span {
    236.             font-size: 28px;
    237.           }
    238.         }
    239.  
    240.         button {
    241.           margin-top: 20px;
    242.           margin-left: 30%;
    243.           width: 40%;
    244.           border-radius: 5px;
    245.           background: #52d3aa;
    246.           color: #fff;
    247.           border: none !important;
    248.           border: 10px solid transparent !important;
    249.           text-transform: uppercase;
    250.           letter-spacing: 2px;
    251.  
    252.         }
    253.  
    254.         button:hover {
    255.           cursor: pointer;
    256.           background: #fff;
    257.           color: #52d3aa;
    258.         }
    259.       }
    260.  
    261.       .card-item:hover {
    262.         background-image: url("@/assets/image/背景图片/img_7.jpg");
    263.         background-size: cover;
    264.         color: #fff;
    265.  
    266.         .card-icon {
    267.           color: #fff !important;
    268.         }
    269.  
    270.       }
    271.     }
    272.  
    273.     .video {
    274.       position: absolute;
    275.       z-index: 9;
    276.       margin-top: -340px;
    277.       margin-left: 38%;
    278.  
    279.       p {
    280.         font-size: 24px;
    281.         font-weight: bolder;
    282.         color: #7f7f7f;
    283.       }
    284.  
    285.       .video-icon {
    286.         margin-top: 30px;
    287.         margin-left: 40px;
    288.         font-size: 150px;
    289.         color: #52d3aa;
    290.       }
    291.  
    292.       .video-icon:hover {
    293.         cursor: pointer;
    294.         font-size: 153px;
    295.       }
    296.     }
    297.   }
    298.  
    299.   .work {
    300.     margin-top: 100px;
    301.     margin-bottom: 300px;
    302.  
    303.     .work-title {
    304.       text-align: center;
    305.       margin-left: 25%;
    306.       margin-right: 25%;
    307.  
    308.       p {
    309.         color: #daedf7;
    310.         font-size: 25px;
    311.         line-height: 50px;
    312.  
    313.         span {
    314.           color: #ffffff;
    315.           font-size: 50px;
    316.  
    317.         }
    318.       }
    319.  
    320.       hr {
    321.         margin-top: 30px;
    322.         margin-bottom: 30px;
    323.         width: 4%;
    324.       }
    325.     }
    326.  
    327.     .picture-list {
    328.       margin-top: 100px;
    329.       margin-left: 10%;
    330.       width: 100%;
    331.       display: flex;
    332.       flex-wrap: wrap; //自动换行
    333.  
    334.       .picture-item {
    335.         border-radius: 8px;
    336.         background-color: #fff;
    337.         height: 370px;
    338.         width: 370px;
    339.         margin: 20px;
    340.  
    341.         .image {
    342.           border-radius: 8px 8px 0 0;
    343.           height: 300px;
    344.           width: 100%;
    345.         }
    346.  
    347.         p {
    348.           text-align: center;
    349.           line-height: 30px;
    350.           color: #b3b3b3;
    351.           font-size: 16px;
    352.  
    353.           span {
    354.             font-weight: bolder;
    355.             color: #000000;
    356.           }
    357.  
    358.           span:hover {
    359.             color: #57d4ac;
    360.           }
    361.         }
    362.  
    363.       }
    364.  
    365.       .picture-item:hover {
    366.         box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    367.         margin-top: -1px;
    368.         cursor: pointer;
    369.       }
    370.     }
    371.   }
    372.  
    373.   .evaluate {
    374.     .tilt {
    375.       background-color: #fff;
    376.       height: 600px;
    377.       transform: skewY(-1.5deg); /* 使顶部向左倾斜10度 */
    378.     }
    379.  
    380.     .title {
    381.       margin-top: -500px;
    382.       position: absolute;
    383.       text-align: center;
    384.       margin-left: 25%;
    385.       margin-right: 25%;
    386.  
    387.       p {
    388.         color: #929292;
    389.         font-size: 25px;
    390.         line-height: 50px;
    391.  
    392.         span {
    393.           color: #444444;
    394.           font-size: 50px;
    395.  
    396.         }
    397.       }
    398.  
    399.       hr {
    400.         margin-top: 30px;
    401.         margin-bottom: 30px;
    402.         width: 4%;
    403.       }
    404.     }
    405.   }
    406. }
    407. style>

  • 相关阅读:
    一、基本remix环境及HelloWord contract《2022 solidity8.+ 版本教程到实战》
    1. 什么是微服务 ?
    视错觉与魔术（一）——经典回顾
    LCP 66.最小展台数量
    HDMI之EDID
    Docker的网络模式 （4+1）
    戴建业作品集读书笔记
    nodejs设置镜像
    爬虫之re数据清洗
    Windows右键没有新建Word、PPT与Excel的解决方法
  • 原文地址：https://blog.csdn.net/m0_63040701/article/details/134473629