Compare commits
2 Commits
624796309b
...
e27476bcc4
| Author | SHA1 | Date |
|---|---|---|
zjlnb666
|
e27476bcc4 | 2 weeks ago |
|
zjlnb666
|
3d9550c179 | 2 weeks ago |
Binary file not shown.
|
After Width: | Height: | Size: 606 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
const props=defineProps({
|
||||
defaultColor: {
|
||||
type: String,
|
||||
default: '#9C9C9C'
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#0b0b0b'
|
||||
},
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
const active=ref(props.modelValue)
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="icons">
|
||||
<div @click="active=0">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.9737 7.19789C13.1693 7.19789 13.3622 7.2122 13.5532 7.23296C13.0327 4.83433 10.4407 3.05176 7.48239 3.05176C4.17471 3.05176 1.46509 5.28286 1.46509 8.1157C1.46509 9.75064 2.36676 11.0934 3.87294 12.1349L3.2712 13.9265L5.3745 12.8825C6.12759 13.0297 6.73114 13.1815 7.48239 13.1815C7.67112 13.1815 7.85799 13.1723 8.04397 13.1575C7.92629 12.7598 7.85799 12.3426 7.85799 11.9102C7.85801 9.30903 10.1154 7.19789 12.9737 7.19789ZM9.73888 5.58328C10.192 5.58328 10.4919 5.8786 10.4919 6.32668C10.4919 6.77289 10.192 7.07191 9.73888 7.07191C9.28756 7.07191 8.83535 6.77289 8.83535 6.32668C8.83535 5.8786 9.28758 5.58328 9.73888 5.58328ZM5.52769 7.07189C5.07638 7.07189 4.62139 6.77288 4.62139 6.32666C4.62139 5.87858 5.07638 5.58326 5.52769 5.58326C5.97851 5.58326 6.27892 5.87858 6.27892 6.32666C6.27892 6.7729 5.97851 7.07189 5.52769 7.07189ZM18.4658 11.8387C18.4658 9.45807 16.0584 7.51767 13.3548 7.51767C10.4919 7.51767 8.23732 9.45807 8.23732 11.8387C8.23732 14.2228 10.4919 16.159 13.3548 16.159C13.9538 16.159 14.5583 16.0104 15.16 15.8609L16.8106 16.7552L16.3579 15.2675C17.566 14.3704 18.4658 13.1815 18.4658 11.8387ZM11.6954 11.0934C11.396 11.0934 11.0937 10.7986 11.0937 10.4977C11.0937 10.201 11.396 9.90245 11.6954 9.90245C12.1504 9.90245 12.4485 10.201 12.4485 10.4977C12.4485 10.7986 12.1504 11.0934 11.6954 11.0934ZM15.0049 11.0934C14.7078 11.0934 14.4074 10.7986 14.4074 10.4977C14.4074 10.201 14.7078 9.90245 15.0049 9.90245C15.4562 9.90245 15.758 10.201 15.758 10.4977C15.758 10.7986 15.4562 11.0934 15.0049 11.0934Z"
|
||||
:fill="active===0?activeColor:defaultColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="active=1">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.9833 3.15509C12.7524 3.19616 12.2367 3.39427 12.2323 3.82109C12.2281 4.2476 12.6849 4.52599 12.9155 4.5474C13.7667 4.5474 17.8375 4.32649 17.093 8.25417C16.9899 8.68499 16.9109 9.34455 17.4221 9.48334C17.8864 9.60008 18.1729 9.11501 18.3018 8.74571C18.3635 8.31591 20.2462 2.68684 12.9833 3.15509Z"
|
||||
:fill="active===1?activeColor:defaultColor"/>
|
||||
<path d="M14.0422 9.72903C14.0422 9.72903 13.1888 9.91356 13.5925 9.27869C14.2263 8.03702 13.1945 5.99945 10.5199 7.35353C9.59838 7.84466 9.59838 7.49665 9.62908 6.88244C9.71191 3.52854 3.49534 5.91983 1.73405 10.2804C0.741142 12.9266 2.33152 15.2126 4.79165 16.2105C10.7965 18.354 15.1686 14.8067 15.9138 12.514C16.9078 9.06883 14.0422 9.72903 14.0422 9.72903ZM8.28392 15.4173C5.44155 15.8078 2.9222 14.5586 2.65556 12.6289C2.39041 10.698 4.47903 8.81535 7.32139 8.42496C10.1637 8.03416 12.6828 9.28219 12.9494 11.2131C13.2149 13.1435 11.1256 15.0248 8.28392 15.4173Z"
|
||||
:fill="active===1?activeColor:defaultColor"/>
|
||||
<path d="M15.3973 8.7178C15.6832 8.7892 15.7945 8.55466 15.8259 8.34056C15.8552 8.12637 16.3488 5.22333 13.1785 5.55809C12.9386 5.58455 12.7769 5.72801 12.8048 5.93859C12.8311 6.1495 13.0089 6.26761 13.1442 6.25153C13.2794 6.23584 15.397 5.86465 15.2235 8.09605C15.2552 8.29913 15.1125 8.64639 15.3973 8.7178Z"
|
||||
:fill="active===2?activeColor:defaultColor"/>
|
||||
<path d="M7.35764 9.77655C5.87613 10.0607 4.85725 11.2445 5.08278 12.4212C5.30832 13.5979 6.69311 14.3206 8.17534 14.0362C9.65716 13.7525 10.6751 12.5683 10.4502 11.3923C10.2236 10.216 8.83987 9.49252 7.35764 9.77655ZM7.18177 12.9512C6.6699 12.9512 6.25485 12.5997 6.25485 12.1628C6.25485 11.7277 6.6699 11.3744 7.18177 11.3744C7.69354 11.3744 8.1083 11.7277 8.1083 12.1628C8.1083 12.599 7.69313 12.9512 7.18177 12.9512ZM8.69963 11.8873C8.50871 11.8873 8.31455 11.6571 8.31455 11.3737C8.31455 11.0907 8.50871 10.8612 8.69963 10.8612C8.89062 10.8612 9.08544 11.0907 9.08544 11.3737C9.08544 11.6574 8.89062 11.8873 8.69963 11.8873Z"
|
||||
:fill="active===1?activeColor:defaultColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div @click="active=2">
|
||||
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.6448 6.29049C11.3983 6.29049 10.1859 5.88537 9.18866 5.13597V10.3639C9.18866 13.0336 7.13189 15.1957 4.59433 15.1957C2.05676 15.1957 0 13.0336 0 10.3639C0 7.69431 2.05676 5.53219 4.59433 5.53219C4.84808 5.53219 5.09442 5.55445 5.33482 5.596V8.36506C5.10481 8.27454 4.85996 8.22854 4.61362 8.22854C3.48136 8.22854 2.56279 9.19311 2.56279 10.3847C2.56279 11.5749 3.48136 12.5409 4.61362 12.5409C5.74439 12.5409 6.66296 11.5749 6.66296 10.3847V0H9.22576C9.22576 1.99592 10.7646 3.61343 12.6626 3.61343V6.28901L12.6448 6.29049Z"
|
||||
:fill="active===2?activeColor:defaultColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-show="active===0">
|
||||
<div class="codes">
|
||||
<div class="code">
|
||||
<div class="border">
|
||||
<img src="../assets/img/code.png" alt="">
|
||||
</div>
|
||||
<div class="title">
|
||||
公众号
|
||||
</div>
|
||||
</div>
|
||||
<div class="code">
|
||||
<div class="border">
|
||||
<img src="../assets/img/code.png" alt="">
|
||||
</div>
|
||||
<div class="title">
|
||||
视频号
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="active===1"></div>
|
||||
<div v-show="active===2"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.icons{
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.codes{
|
||||
display: flex;
|
||||
gap: 20%;
|
||||
.code{
|
||||
.border{
|
||||
padding:10px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.title{
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
<script setup>
|
||||
|
||||
import {ArrowLeftBold, ArrowRightBold} from "@element-plus/icons-vue";
|
||||
import {computed, ref} from "vue";
|
||||
import HonorItem from "@/components/about/HonorItem.vue";
|
||||
|
||||
const props=defineProps({
|
||||
honorData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const groupedData = computed(() => {
|
||||
const groups = [];
|
||||
const data = props.honorData;
|
||||
|
||||
for (let i = 0; i < data.length; i += 6) {
|
||||
const group = data.slice(i, i + 6);
|
||||
// 将分组后的数组添加到结果数组中
|
||||
groups.push(group);
|
||||
}
|
||||
|
||||
// 返回分组后的二维数组
|
||||
return groups;
|
||||
});
|
||||
|
||||
const carouselRef = ref(null);
|
||||
// 上一张
|
||||
const prev = () => {
|
||||
if (carouselRef.value) {
|
||||
carouselRef.value.prev()
|
||||
}
|
||||
}
|
||||
|
||||
// 下一张
|
||||
const next = () => {
|
||||
if (carouselRef.value) {
|
||||
carouselRef.value.next()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="about-honor">
|
||||
<div class="center">
|
||||
<span class="demonstration"></span>
|
||||
<el-button class="carousel-btn prev-btn" @click="prev"><el-icon><ArrowLeftBold /></el-icon></el-button>
|
||||
<el-button class="carousel-btn next-btn" @click="next"><el-icon><ArrowRightBold /></el-icon></el-button>
|
||||
<el-carousel height="1000px" arrow="never" :interval="5000" ref="carouselRef">
|
||||
<el-carousel-item v-for="(group, index) in groupedData" :key="index">
|
||||
<div class="item-container">
|
||||
<HonorItem
|
||||
v-for="(item,index) in group"
|
||||
:key=index
|
||||
:time="item.time"
|
||||
:image="item.image"
|
||||
:label="item.label" />
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.about-honor {
|
||||
background-image: url("@/assets/img/about-honor-bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
padding: 50px 0;
|
||||
box-sizing:border-box;
|
||||
height: 1080px;
|
||||
.center{
|
||||
width: 1160px;
|
||||
margin: 0 auto;
|
||||
position: relative; /* 设置为相对定位，作为按钮绝对定位的参考 */
|
||||
}
|
||||
|
||||
// 轮播按钮样式
|
||||
.carousel-btn {
|
||||
--el-font-size-base:60px;
|
||||
position: absolute; /* 绝对定位 */
|
||||
top: 50%; /* 垂直居中 */
|
||||
transform: translateY(-50%); /* 精确垂直居中 */
|
||||
z-index: 10; /* 确保按钮在轮播内容之上 */
|
||||
background-color: rgba(0, 0, 0, 0); /* 半透明背景 */
|
||||
color: #CFCFCF; /* 文字颜色 */
|
||||
border: none; /* 移除边框 */
|
||||
padding: 30px; /* 调整内边距 */
|
||||
cursor: pointer; /* 鼠标指针变为手型 */
|
||||
transition: background-color 0.3s; /* 背景色过渡效果 */
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1); /* hover时背景色加深 */
|
||||
}
|
||||
}
|
||||
|
||||
// 上一张按钮定位到左侧
|
||||
.prev-btn {
|
||||
left: -130px; /* 向左偏移 */
|
||||
}
|
||||
|
||||
// 下一张按钮定位到右侧
|
||||
.next-btn {
|
||||
right: -130px; /* 向右偏移 */
|
||||
}
|
||||
.item-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<script setup>
|
||||
import { getImageUrl } from '@/utils/function.js'
|
||||
const props=defineProps({
|
||||
time: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="time">{{time}}</div>
|
||||
<div class="image">
|
||||
<img :src="getImageUrl(image)" alt="">
|
||||
</div>
|
||||
<div class="label">{{label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.content{
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
.time{
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
background: linear-gradient(92.58deg, #59A1FF 3.66%, #816BFF 95.68%);
|
||||
width: 106px;
|
||||
height: 27px;
|
||||
border-radius: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.06em;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.image{
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #EEF5FF 100%);
|
||||
width: 363px;
|
||||
height: 403px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
box-shadow: 0 0 20.2px 0 #C1D1F0;
|
||||
|
||||
}
|
||||
.label{
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0.06em;
|
||||
color: #333333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue