feat: 完成爱情故事对接
This commit is contained in:
parent
42a2b69fe2
commit
32dd191833
@ -15,7 +15,7 @@
|
|||||||
& > img{
|
& > img{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
object-fit: cover;
|
object-fit: fill;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -45,7 +45,7 @@
|
|||||||
|
|
||||||
.Final-container {
|
.Final-container {
|
||||||
// 底部背景颜色
|
// 底部背景颜色
|
||||||
background: #193066;
|
background: pink;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
@ -135,7 +135,7 @@
|
|||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
// 底部版权颜色
|
// 底部版权颜色
|
||||||
background-color:#193066;
|
background-color:#313131;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
.HeaderIcon-container {
|
.HeaderIcon-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 280px;
|
max-width: 220px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@ -20,7 +20,8 @@
|
|||||||
|
|
||||||
//Header.scss
|
//Header.scss
|
||||||
.Header{
|
.Header{
|
||||||
margin-top: -85px;
|
top: 0;
|
||||||
|
// margin-bottom: 85px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -28,8 +29,10 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99999;
|
z-index: 999999;
|
||||||
background: #fff;
|
background-color: #fff;
|
||||||
|
border-bottom: rgba($color: #000000, $alpha: .2) 1px solid;
|
||||||
|
// background: rgba(255, 188, 199,.3);
|
||||||
// background: rgba($color: #000000, $alpha: .2);
|
// background: rgba($color: #000000, $alpha: .2);
|
||||||
.Header-container{
|
.Header-container{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -76,7 +76,7 @@ a {
|
|||||||
// border-color: transparent transparent black!important;
|
// border-color: transparent transparent black!important;
|
||||||
// }
|
// }
|
||||||
span {
|
span {
|
||||||
color: #f9b54c !important;
|
color: pink !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -129,3 +129,4 @@
|
|||||||
text-decoration: dashed;
|
text-decoration: dashed;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
.joint-details-pos-box {
|
.joint-details-pos-box {
|
||||||
padding-bottom: 15rem;
|
padding: 10rem 0 15rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 标题
|
// 标题
|
||||||
@ -21,6 +21,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-btn{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.return {
|
.return {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
@ -43,3 +47,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.music-box{
|
||||||
|
position: fixed;
|
||||||
|
right: 10%;
|
||||||
|
top: 15%;
|
||||||
|
.music-name{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,17 +1,33 @@
|
|||||||
|
.card-pos-box{
|
||||||
|
/* background-color: #f8f8f8; */
|
||||||
|
}
|
||||||
|
.love-story-title-box{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-story-title-box h4{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.card-pos-box{
|
.card-pos-box{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 150px 0;
|
/* margin: 150px 0; */
|
||||||
|
padding: 100px 0;
|
||||||
|
/* background-color: #f8f8f8; */
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.content .card1 {
|
.content .card1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
|
||||||
height: 500px;
|
height: 500px;
|
||||||
margin: 0 80px;
|
margin: 0 80px;
|
||||||
}
|
}
|
||||||
@ -28,6 +44,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
.content .card1 .show-wrapper .title {
|
.content .card1 .show-wrapper .title {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
@ -50,13 +67,14 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
|
/* margin-top: 10px; */
|
||||||
}
|
}
|
||||||
.content .card1 .hover-wrapper .hover-info {
|
.content .card1 .hover-wrapper .hover-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 2vw;
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
.content .card1 .hover-wrapper .hover-info .info-item {
|
.content .card1 .hover-wrapper .hover-info .info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -65,22 +83,22 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.content .card1 .hover-wrapper .hover-info .info-item .info-item-title {
|
.content .card1 .hover-wrapper .hover-info .info-item .info-item-title {
|
||||||
font-size: 0.8vw;
|
font-size: 20px;
|
||||||
color: #cccccc;
|
color: #cccccc;
|
||||||
}
|
}
|
||||||
.content .card1 .hover-wrapper .hover-info .line {
|
.content .card1 .hover-wrapper .hover-info .line {
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 4vh;
|
height: 2vw;
|
||||||
margin: 0 1vw;
|
margin: 20px 1vw 0 1vw;
|
||||||
background: #cccccc;
|
background: #cccccc;
|
||||||
}
|
}
|
||||||
.content .card1 .hover-wrapper .btn {
|
.content .card1 .hover-wrapper .btn {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-top: 1.5vh;
|
margin-top: 1.5vw;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
background-color: rgb(67, 119, 216);
|
background-color: rgb(67, 119, 216);
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: 1vw;
|
font-size: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@ -144,3 +162,19 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}/*# sourceMappingURL=style.css.map */
|
}/*# sourceMappingURL=style.css.map */
|
||||||
|
|
||||||
|
.love-story-btn-box{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.love-story-btn-box .btn {
|
||||||
|
margin-top: 0vw;
|
||||||
|
border-radius: 50px;
|
||||||
|
background-color: rgb(67, 119, 216);
|
||||||
|
padding: 5px 100px;
|
||||||
|
border: 0;
|
||||||
|
font-size: 1vw;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
@ -3,114 +3,94 @@
|
|||||||
// background-color: black;
|
// background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 心愿清单
|
||||||
// 米尔产品
|
.cardiac-moment-pos-box{
|
||||||
.product-big-box{
|
width: 100%;
|
||||||
background-color: #f8f8f8;
|
// height: 600px;
|
||||||
padding: 100px 0 100px 0;
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 5vw;
|
||||||
|
padding-bottom: 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-pos-box {
|
.cardiac-moment-img-box{
|
||||||
margin: 0 auto;
|
width: 65%;
|
||||||
width: 85%;
|
height: 70%;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-title-box {}
|
|
||||||
|
|
||||||
.product-title {
|
|
||||||
letter-spacing: 3px;
|
|
||||||
font-size: 35px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-type-box {
|
|
||||||
padding: 10px;
|
|
||||||
margin: 30px 0px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-typ-item {
|
|
||||||
font-size: 18px;
|
|
||||||
margin: 0px 50px 0px 0px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-content-box {
|
|
||||||
width: 72%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-content-left-box {
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 300px;
|
position: absolute;
|
||||||
width: 45%;
|
bottom: 0;
|
||||||
box-shadow: rgb(219, 219, 219) 0px 0px 10px 1px;
|
z-index: -1;
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
// transform: translateY(-10px);
|
|
||||||
}
|
}
|
||||||
|
.cardiac-moment-img-box img{
|
||||||
.product-content-left-box img {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.product-content-right-box {
|
|
||||||
height: 300px;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-content-right-intro {
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgb(155, 155, 155);
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-advantage-pos-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
margin: 50px 0 0 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-advantage-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-advantage-img-box {
|
|
||||||
height: 45px;
|
|
||||||
width: 45px;
|
|
||||||
margin: 0px 0px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-advantage-img-box img {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
.cardiac-moment-big-box{
|
||||||
.product-advantage-text {
|
display: flex;
|
||||||
width: 70px;
|
justify-content: center;
|
||||||
font-size: 16px;
|
|
||||||
color: rgb(130, 130, 130);
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
// .cardiac-moment-big-box{
|
||||||
.product-content-btn-box {
|
// display: flex;
|
||||||
margin-top: 30px;
|
// flex-wrap: wrap;
|
||||||
|
// align-items: center;
|
||||||
|
// }
|
||||||
|
// .cardiac-moment-big-text-box{
|
||||||
|
// width: 200px;
|
||||||
|
// }
|
||||||
|
// .cardiac-moment-big-img-box{
|
||||||
|
// width: 300px;
|
||||||
|
// height: 450px;
|
||||||
|
// overflow: hidden;
|
||||||
|
// margin-left: 200px;
|
||||||
|
// }
|
||||||
|
// .cardiac-moment-big-img-box img{
|
||||||
|
// width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
// object-fit: contain;
|
||||||
|
// }
|
||||||
|
.todo-list-big-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-box {
|
||||||
|
height: 120px;
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0px 0px 0px 20px;
|
||||||
|
background-color: rgb(229, 229, 229);
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-check-box {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
margin: 0px 0px 0px 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-check-img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-text-box {
|
||||||
|
margin: 0px 0px 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-time {
|
||||||
|
margin: 5px 0px 0px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-text {
|
||||||
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
@ -9,13 +9,17 @@
|
|||||||
loop：循环
|
loop：循环
|
||||||
swiperStyle：自定义样式
|
swiperStyle：自定义样式
|
||||||
-->
|
-->
|
||||||
|
<!-- :autoplay="{delay: 10000}" -->
|
||||||
|
<!-- :navigation="{ clickable: true }"
|
||||||
|
:pagination="{ clickable: true }"
|
||||||
|
:loop="true" -->
|
||||||
|
|
||||||
<swiper id="swiper" ref="swiperRef"
|
<swiper id="swiper" ref="swiperRef"
|
||||||
:initialSlide="0"
|
:initialSlide="0"
|
||||||
:modules="modules"
|
:modules="modules"
|
||||||
|
:autoplay="{delay: 10000}"
|
||||||
:navigation="{ clickable: true }"
|
:navigation="{ clickable: true }"
|
||||||
:pagination="{ clickable: true }"
|
:pagination="{ clickable: true }"
|
||||||
:autoplay="{delay: 10000}"
|
|
||||||
:loop="true"
|
:loop="true"
|
||||||
:style="swiperStyle"
|
:style="swiperStyle"
|
||||||
class="carousel-box"
|
class="carousel-box"
|
||||||
@ -63,19 +67,20 @@ const params = reactive({
|
|||||||
// })
|
// })
|
||||||
// 获取海报
|
// 获取海报
|
||||||
useFetch('/api/banner/getBanner',{ params: { banner_location: 1 } }).then(res => {
|
useFetch('/api/banner/getBanner',{ params: { banner_location: 1 } }).then(res => {
|
||||||
|
// console.log(JSON.parse(res.data.value),'asdasdasd');
|
||||||
banner_list.value = JSON.parse(res.data.value).data
|
banner_list.value = JSON.parse(res.data.value).data
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
/**整体轮播图样式*/
|
/**整体轮播图样式*/
|
||||||
let styleContainer = reactive({
|
let styleContainer = reactive({
|
||||||
height: '33vw',
|
height: '35vw',
|
||||||
})
|
})
|
||||||
const modules = ref([Pagination, Navigation, Autoplay])
|
const modules = ref([Pagination, Navigation, Autoplay])
|
||||||
const swiperStyle = conversionStyleVal(reactive({
|
const swiperStyle = conversionStyleVal(reactive({
|
||||||
/**轮播图样式*/
|
/**轮播图样式*/
|
||||||
color: '', //设置字体颜色
|
color: '', //设置字体颜色
|
||||||
height: '33vw', //设置高度
|
height: '35vw', //设置高度
|
||||||
width: '100%', //设置高度
|
width: '100%', //设置高度
|
||||||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||||||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||||||
|
|||||||
@ -16,10 +16,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="Final-container" :style="FinalStyle">
|
<div class="Final-container" :style="FinalStyle">
|
||||||
<div class="Final-big-box">
|
<!-- <div class="Final-big-box">
|
||||||
<!-- <div class="Final-icon-box" :style="FinalStyle.FinalLeft">
|
<div class="Final-icon-box" :style="FinalStyle.FinalLeft">
|
||||||
<img src="/img/icon/logo1.ico" class="icon-img" alt="">
|
<img src="/img/icon/logo1.ico" class="icon-img" alt="">
|
||||||
</div> -->
|
</div>
|
||||||
<div class="Final-middle-box" :style="FinalStyle.FinalMiddle">
|
<div class="Final-middle-box" :style="FinalStyle.FinalMiddle">
|
||||||
<div class="Final-middle-items">
|
<div class="Final-middle-items">
|
||||||
<div class="items-title">关于我们</div>
|
<div class="items-title">关于我们</div>
|
||||||
@ -91,23 +91,17 @@
|
|||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div class="Final-middle-phone-box">
|
<!-- <div class="Final-middle-phone-box">
|
||||||
<div class="Final-middle-phone-title-box">
|
<div class="Final-middle-phone-title-box">
|
||||||
<div class="Final-middle-phone-title">全国咨询热线</div>
|
<div class="Final-middle-phone-title">全国咨询热线</div>
|
||||||
<div class="Final-middle-phone-content-box">
|
<div class="Final-middle-phone-content-box">
|
||||||
<div v-for="(item, index) in bottomData.hoteline" class="Final-middle-phone-content">
|
111
|
||||||
{{ item.consulting_hotline_user }} : {{ item.consulting_hotline_phone }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="Final-code-box">
|
|
||||||
<div class="code-text">扫描关注微信公众号</div>
|
|
||||||
<img :src=bottomData.wx_office_accounts_img alt="微信公众号图片">
|
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="Final-bottom-box">©2023 米尔科技有限公司 版权所有</div>
|
<div class="Final-bottom-box">©2023年8月15日 纪念青春，愿有情人终成眷属，珍惜眼前人。</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -115,7 +109,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
// 样式配置
|
// 样式配置
|
||||||
const FinalStyle = {
|
const FinalStyle = {
|
||||||
padding: "80px 0 0 0",
|
padding: "0px 0 0 0",
|
||||||
FinalLeft: {
|
FinalLeft: {
|
||||||
|
|
||||||
},
|
},
|
||||||
@ -154,11 +148,11 @@ const createShareCode = function (code) {
|
|||||||
// 获取
|
// 获取
|
||||||
let bottomData = ref({})
|
let bottomData = ref({})
|
||||||
|
|
||||||
useFetch('/api/contactUs/getContactInfo').then(res => {
|
// useFetch('/api/contactUs/getContactInfo').then(res => {
|
||||||
let resValue = JSON.parse(res.data.value).data
|
// let resValue = JSON.parse(res.data.value).data
|
||||||
bottomData.value = resValue
|
// bottomData.value = resValue
|
||||||
shareList.value = resValue.qrcode
|
// shareList.value = resValue.qrcode
|
||||||
})
|
// })
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@ -67,29 +67,29 @@ let navList = [
|
|||||||
alias: 'index'
|
alias: 'index'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '产品中心',
|
name: '爱情故事',
|
||||||
children: [],
|
children: [],
|
||||||
href: 'https://gitee.com/zhi-lan_0/aerowen-toolbox',
|
href: '/love-story/1',
|
||||||
alias: 'Gitee'
|
alias: 'love-story'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '服务与支持',
|
name: '心愿单',
|
||||||
children: [],
|
children: [],
|
||||||
href: 'https://github.com/Abbh1/AerwenTool',
|
href: 'https://github.com/Abbh1/AerwenTool',
|
||||||
alias: 'GitHub'
|
alias: 'GitHub'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '新闻中心',
|
name: '留言',
|
||||||
children: [],
|
children: [],
|
||||||
href: '/news/0-1',
|
href: '/',
|
||||||
alias: 'news'
|
alias: ''
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '关于我们',
|
|
||||||
children: [],
|
|
||||||
href: 'https://github.com/Abbh1/AerwenTool',
|
|
||||||
alias: 'GitHub'
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// name: '关于我们',
|
||||||
|
// children: [],
|
||||||
|
// href: 'https://github.com/Abbh1/AerwenTool',
|
||||||
|
// alias: 'GitHub'
|
||||||
|
// },
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|||||||
@ -8,14 +8,14 @@ export default defineNuxtConfig({
|
|||||||
nitro: {
|
nitro: {
|
||||||
devProxy: {
|
devProxy: {
|
||||||
"/api-v": {
|
"/api-v": {
|
||||||
target: "http://localhost/Aerwen/mr_web/mr_web_api/public/api.php/", // 文豪
|
target: "http://localhost/Aerwen/heart_cabin/heart_cabin_api/public/api.php/", // 文豪
|
||||||
// target: "http://192.168.1.18/ARW/houde_web/houde_web_api/public/api.php/", // 君豪
|
// target: "http://192.168.1.18/ARW/houde_web/houde_web_api/public/api.php/", // 君豪
|
||||||
// target: "http://houde_web.back.aerwen.net/api", // 这里是线上接口地址
|
// target: "http://houde_web.back.aerwen.net/api", // 这里是线上接口地址
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
prependPath: true,
|
prependPath: true,
|
||||||
},
|
},
|
||||||
"/uploads": {
|
"/uploads": {
|
||||||
target: "http://localhost/Aerwen/mr_web/mr_web_api/public/uploads", // 文豪
|
target: "http://localhost/Aerwen/heart_cabin/heart_cabin_api/public/uploads", // 文豪
|
||||||
// target: "http://192.168.1.18/ARW/houde_web/houde_web_api/public/uploads", // 君豪
|
// target: "http://192.168.1.18/ARW/houde_web/houde_web_api/public/uploads", // 君豪
|
||||||
// target: "https://houde.api.aerwen.net/uploads", // 这里是线上接口地址
|
// target: "https://houde.api.aerwen.net/uploads", // 这里是线上接口地址
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
|
|||||||
272
pages/card.vue
272
pages/card.vue
@ -55,57 +55,78 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 心愿清单 -->
|
||||||
|
<div id="checklist">
|
||||||
|
<input id="01" type="checkbox" name="r" value="1" checked>
|
||||||
|
<label for="01">Bread</label>
|
||||||
|
<input id="02" type="checkbox" name="r" value="2">
|
||||||
|
<label for="02">Cheese</label>
|
||||||
|
<input id="03" type="checkbox" name="r" value="3">
|
||||||
|
<label for="03">Coffee</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup >
|
<script lang="ts" setup >
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.card-pos-box {
|
.card-pos-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 150px 0;
|
margin: 150px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 {
|
.content .card1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
margin: 0 80px;
|
margin: 0 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .show-wrapper {
|
.content .card1 .show-wrapper {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
transition: 0.4s;
|
transition: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .show-wrapper .pic-wrapper {
|
.content .card1 .show-wrapper .pic-wrapper {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
transition: 0.4s;
|
transition: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .show-wrapper .pic-wrapper img {
|
.content .card1 .show-wrapper .pic-wrapper img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .show-wrapper .title {
|
.content .card1 .show-wrapper .title {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .show-wrapper .show-info {
|
.content .card1 .show-wrapper .show-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
color: #cccccc;
|
color: #cccccc;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .show-wrapper .show-info .show-info-item svg {
|
.content .card1 .show-wrapper .show-info .show-info-item svg {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .hover-wrapper {
|
.content .card1 .hover-wrapper {
|
||||||
display: none;
|
display: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -114,6 +135,7 @@ align-items: center;
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .hover-wrapper .hover-info {
|
.content .card1 .hover-wrapper .hover-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -121,22 +143,26 @@ justify-content: center;
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 2vw;
|
font-size: 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .hover-wrapper .hover-info .info-item {
|
.content .card1 .hover-wrapper .hover-info .info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .hover-wrapper .hover-info .info-item .info-item-title {
|
.content .card1 .hover-wrapper .hover-info .info-item .info-item-title {
|
||||||
font-size: 0.8vw;
|
font-size: 0.8vw;
|
||||||
color: #cccccc;
|
color: #cccccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .hover-wrapper .hover-info .line {
|
.content .card1 .hover-wrapper .hover-info .line {
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 4vh;
|
height: 4vh;
|
||||||
margin: 0 1vw;
|
margin: 0 1vw;
|
||||||
background: #cccccc;
|
background: #cccccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .hover-wrapper .btn {
|
.content .card1 .hover-wrapper .btn {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-top: 1.5vh;
|
margin-top: 1.5vh;
|
||||||
@ -147,6 +173,7 @@ font-size: 1vw;
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1 .background {
|
.content .card1 .background {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -166,23 +193,29 @@ background-size: cover;
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: top;
|
background-position: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1:hover .show-wrapper {
|
.content .card1:hover .show-wrapper {
|
||||||
transform: translateY(-25%);
|
transform: translateY(-25%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1:hover .show-wrapper .pic-wrapper {
|
.content .card1:hover .show-wrapper .pic-wrapper {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1:hover .show-wrapper .title {
|
.content .card1:hover .show-wrapper .title {
|
||||||
animation: nameAmt 0.5s ease-in-out forwards;
|
animation: nameAmt 0.5s ease-in-out forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1:hover .show-wrapper .show-info {
|
.content .card1:hover .show-wrapper .show-info {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1:hover .hover-wrapper {
|
.content .card1:hover .hover-wrapper {
|
||||||
animation: hoverWrapperAmt 0.5s ease-in-out forwards;
|
animation: hoverWrapperAmt 0.5s ease-in-out forwards;
|
||||||
display: flex;
|
display: flex;
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .card1:hover .background {
|
.content .card1:hover .background {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
@ -193,19 +226,254 @@ transform: scale(1.1);
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: translateY(-55%);
|
transform: translateY(-55%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes hoverWrapperAmt {
|
@keyframes hoverWrapperAmt {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}/*# sourceMappingURL=style.css.map */
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
|
||||||
|
|
||||||
|
#checklist {
|
||||||
|
--background: #ffffff;
|
||||||
|
--text: #414856;
|
||||||
|
--check: #4f29f0;
|
||||||
|
--disabled: #c3c8de;
|
||||||
|
--width: 100px;
|
||||||
|
--height: 140px;
|
||||||
|
--border-radius: 10px;
|
||||||
|
background: var(--background);
|
||||||
|
width: var(--width);
|
||||||
|
height: var(--height);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 10px 30px rgba(#414856, 0.05);
|
||||||
|
padding: 30px 45px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 30px auto;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: var(--text);
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
width: fit-content;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
height: 2px;
|
||||||
|
width: 8px;
|
||||||
|
left: -27px;
|
||||||
|
background: var(--check);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
height: 4px;
|
||||||
|
width: 4px;
|
||||||
|
top: 8px;
|
||||||
|
left: -25px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
position: relative;
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
outline: none;
|
||||||
|
border: 0;
|
||||||
|
margin: 0 15px 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--background);
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
height: 2px;
|
||||||
|
top: auto;
|
||||||
|
background: var(--check);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 0px;
|
||||||
|
right: 60%;
|
||||||
|
transform-origin: right bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 0px;
|
||||||
|
left: 40%;
|
||||||
|
transform-origin: left bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
&::before {
|
||||||
|
animation: check-01 0.4s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
animation: check-02 0.4s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
+label {
|
||||||
|
color: var(--disabled);
|
||||||
|
animation: move 0.3s ease 0.1s forwards;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: var(--disabled);
|
||||||
|
animation: slice 0.4s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
animation: firework 0.5s ease forwards 0.1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move {
|
||||||
|
50% {
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slice {
|
||||||
|
60% {
|
||||||
|
width: 100%;
|
||||||
|
left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
width: 100%;
|
||||||
|
left: -2px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes check-01 {
|
||||||
|
0% {
|
||||||
|
width: 4px;
|
||||||
|
top: auto;
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
width: 0px;
|
||||||
|
top: auto;
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
51% {
|
||||||
|
width: 0px;
|
||||||
|
top: 8px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
width: 5px;
|
||||||
|
top: 8px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes check-02 {
|
||||||
|
0% {
|
||||||
|
width: 4px;
|
||||||
|
top: auto;
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
width: 0px;
|
||||||
|
top: auto;
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
51% {
|
||||||
|
width: 0px;
|
||||||
|
top: 8px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
width: 10px;
|
||||||
|
top: 8px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes firework {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0,
|
||||||
|
0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0,
|
||||||
|
14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0,
|
||||||
|
-14px -8px 0 0px #4f29f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//--- ## BASIC #############
|
||||||
|
|
||||||
|
.socials {
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
left: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
|
||||||
|
>a {
|
||||||
|
display: block;
|
||||||
|
width: 30px;
|
||||||
|
opacity: 0.2;
|
||||||
|
transform: scale(var(--scale, 0.8));
|
||||||
|
transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
--scale: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -15,15 +15,21 @@
|
|||||||
<div class="Home-main">
|
<div class="Home-main">
|
||||||
|
|
||||||
|
|
||||||
<!-- 卡片展示 -->
|
<!-- 爱情故事展示 -->
|
||||||
<div class="card-pos-box">
|
<div class="card-pos-box">
|
||||||
|
|
||||||
|
<div class="love-story-title-box">
|
||||||
|
<h2>爱情故事</h2>
|
||||||
|
<h4>记录生活，分享喜悦，快乐相随</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="card1" v-for="(item, idx) in 3">
|
<div class="card1" >
|
||||||
<div class="show-wrapper">
|
<div class="show-wrapper">
|
||||||
<div class="pic-wrapper">
|
<div class="pic-wrapper">
|
||||||
<img src="http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png" />
|
<img src="http://tool.aerwen.net/prod-api/Uploads/uploads/20230816/47B42E97B65317FB.png" />
|
||||||
</div>
|
</div>
|
||||||
<h2 class="title">Mario</h2>
|
<h2 class="title">暑假初见</h2>
|
||||||
<div class="show-info">
|
<div class="show-info">
|
||||||
<div class="show-info-item">
|
<div class="show-info-item">
|
||||||
<svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
|
<svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
|
||||||
@ -38,75 +44,59 @@
|
|||||||
d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
|
d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
|
||||||
fill="#FFFFFF" p-id="1645"></path>
|
fill="#FFFFFF" p-id="1645"></path>
|
||||||
</svg>
|
</svg>
|
||||||
132k
|
2023/08/10
|
||||||
</div>
|
|
||||||
<div class="show-info-item">
|
|
||||||
<svg t="1690023393353" class="icon Watch-icon" viewBox="0 0 1024 1024" version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg" p-id="1798" width="128" height="128">
|
|
||||||
<path
|
|
||||||
d="M512 853.333333c-263.9872 0-477.866667-284.672-477.866667-341.230933C34.133333 471.3472 248.0128 170.666667 512 170.666667c263.918933 0 477.866667 303.445333 477.866667 341.435733C989.7984 568.900267 775.850667 853.333333 512 853.333333z m-6.144-521.1136c-127.658667 0-276.5824 60.279467-276.5824 187.938134s148.8896 174.318933 276.548267 174.318933 279.005867-46.660267 279.005866-174.318933-151.3472-187.938133-279.005866-187.938134z m2.594133 93.7984a79.325867 79.325867 0 0 0 79.223467 79.291734c10.376533 0 19.968-2.1504 29.013333-5.563734 0.341333 3.6864 1.297067 7.202133 1.297067 11.0592a113.220267 113.220267 0 1 1-226.542933 0 113.322667 113.322667 0 0 1 113.220266-113.3568c3.1744 0 6.178133 0.7168 9.216 0.989867-3.345067 8.6016-5.4272 17.749333-5.4272 27.579733z"
|
|
||||||
fill="#85C2FF" p-id="1799"></path>
|
|
||||||
</svg>
|
|
||||||
12k
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hover-wrapper">
|
<div class="hover-wrapper">
|
||||||
<div class="hover-info">
|
<div class="hover-info">
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<span>13k</span>
|
<!-- 地点 -->
|
||||||
<span class="info-item-title">Loveing</span>
|
<span>容桂站</span>
|
||||||
</div>
|
<span class="info-item-title">2023/08/10</span>
|
||||||
<div class="line"></div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span>14k</span>
|
|
||||||
<span class="info-item-title">Watching</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn">查看更多</button>
|
<button class="btn">查看</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="background"></div>
|
<div class="background"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="love-story-btn-box">
|
||||||
|
<button class="btn">查看更多</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 米尔产品 -->
|
<!-- 心动瞬间 -->
|
||||||
<div class="product-big-box">
|
<div class="cardiac-moment-pos-box">
|
||||||
<div class="product-pos-box">
|
<div class="cardiac-moment-img-box">
|
||||||
<div class="product-title-box">
|
<img src="/img/home/monment.png" alt="">
|
||||||
<h1 class="product-title">米尔产品 </h1>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="product-type-box">
|
|
||||||
<div v-for="item in 4" class="product-typ-item">
|
<div class="love-story-title-box">
|
||||||
ARM开发工具
|
<h2>心愿清单</h2>
|
||||||
</div>
|
<h4>听我许下与你有关的心愿</h4>
|
||||||
</div>
|
|
||||||
<div class="product-content-box op0" data-animation="animate__animated animate__fadeInUp animate__animated_slow">
|
|
||||||
<div class="product-content-left-box"><img src="https://www.myir-tech.com/public/images/index/product_02.jpg?1">
|
|
||||||
</div>
|
|
||||||
<div class="product-content-right-box" style="">
|
|
||||||
<div class="product-content-right-intro">
|
|
||||||
米尔通过与ST，TI，NXP，全志，Microchip等芯片原厂保持深度密切合作，自主研发了系列应用于工业控制及物联网等相关领域的核心板和开发板等产品，帮助客户实现产品及方案的快速开发。
|
|
||||||
</div>
|
|
||||||
<div class="product-advantage-pos-box">
|
|
||||||
<div class="product-advantage-box" v-for="(item, idx) in 3">
|
|
||||||
<div class="product-advantage-img-box">
|
|
||||||
<img src="https://www.myir-tech.com/public/images/index/my_product_icon_04.png">
|
|
||||||
</div>
|
|
||||||
<div class="product-advantage-text">品质优良 性能卓越</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="product-content-btn-box">
|
|
||||||
<el-button type="warning">查看产品</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="todo-list-big-box">
|
||||||
|
<div class="todo-list-box" v-for="(item) in 3">
|
||||||
|
<div class="todo-list-check-box">
|
||||||
|
<img alt="" class="todo-list-check-img" src="https://www.mitangguan.cn/img/mitangguan/complete.png">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="todo-list-text-box">
|
||||||
|
<div class="todo-list-text">一起去川西！</div>
|
||||||
|
<div class="todo-list-time">2023-02-07</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="love-story-btn-box">
|
||||||
|
<button class="btn">查看更多</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
156
pages/love-story/[page].vue
Normal file
156
pages/love-story/[page].vue
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<Head>
|
||||||
|
<Title>{{ tdkNewType }}{{ tdk.tdk_title }}</Title>
|
||||||
|
<Meta :content=tdk.tdk_keyword name="keywords" />
|
||||||
|
<Meta :content=tdk.tdk_description name="description" />
|
||||||
|
</Head>
|
||||||
|
<Header></Header>
|
||||||
|
<Poster :type=1></Poster>
|
||||||
|
|
||||||
|
<div class="background_box">
|
||||||
|
|
||||||
|
<main class="container ">
|
||||||
|
<!-- 爱情故事展示 -->
|
||||||
|
<div class="card-pos-box">
|
||||||
|
|
||||||
|
<div class="love-story-title-box">
|
||||||
|
<h2>爱情故事</h2>
|
||||||
|
<h4>记录生活，分享喜悦，快乐相随</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<!-- 列表渲染 -->
|
||||||
|
<div class="card1" v-for="(item) in loveStoryList" :key=item.love_story_id>
|
||||||
|
<div class="show-wrapper">
|
||||||
|
<div class="pic-wrapper">
|
||||||
|
<img :src=item.love_story_cover />
|
||||||
|
</div>
|
||||||
|
<h2 class="title">{{item.love_story_title}}</h2>
|
||||||
|
<div class="show-info">
|
||||||
|
<div class="show-info-item">
|
||||||
|
<svg t="1690023375234" class="icon love-icon" viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="1642" width="128" height="128">
|
||||||
|
<path
|
||||||
|
d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
|
||||||
|
fill="" p-id="1643"></path>
|
||||||
|
<path
|
||||||
|
d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
|
||||||
|
fill="#FF5F5F" p-id="1644"></path>
|
||||||
|
<path
|
||||||
|
d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
|
||||||
|
fill="#FFFFFF" p-id="1645"></path>
|
||||||
|
</svg>
|
||||||
|
{{item.love_story_date}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hover-wrapper">
|
||||||
|
<div class="hover-info">
|
||||||
|
<div class="info-item">
|
||||||
|
<!-- 地点 -->
|
||||||
|
<span>{{item.love_story_place}}</span>
|
||||||
|
<span class="info-item-title">{{item.love_story_date}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nuxt-link :to="getLink(item)" class="btn">
|
||||||
|
<div>查看</div>
|
||||||
|
</nuxt-link>
|
||||||
|
</div>
|
||||||
|
<div class="background"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="page-box">
|
||||||
|
<pagination class="page" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit"
|
||||||
|
@pagination="routerJump()" />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Final></Final>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
// 预对接
|
||||||
|
let loveStoryList = ref(
|
||||||
|
[
|
||||||
|
// {
|
||||||
|
// "love_story_id": 2,
|
||||||
|
// "love_story_title": "暑假初见1",
|
||||||
|
// "love_story_author": "lwh1",
|
||||||
|
// "love_story_place": "广州南站1",
|
||||||
|
// "love_story_date": "2023-07-07",
|
||||||
|
// "love_story_cover": "/uploads/LoveStoryImg/20230824\\ed099c7eac8b171c38814b985b4f5de5.jpg"
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
)
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- 参数 ---
|
||||||
|
let total = ref(0)
|
||||||
|
const queryParams = reactive({
|
||||||
|
page: parseInt(route.params.page) || 1,
|
||||||
|
limit: 10
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- 方法 ---
|
||||||
|
const routerJump = function () {
|
||||||
|
let { page } = queryParams
|
||||||
|
router.push(String(page))
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLink = function (item) {
|
||||||
|
if (item.love_story_link) {
|
||||||
|
return item.love_story_link;
|
||||||
|
} else {
|
||||||
|
return "/love-story/details/" + item.love_story_id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 接口对接
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 获取Tdk
|
||||||
|
let tdk = ref({})
|
||||||
|
useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
|
||||||
|
tdk.value = JSON.parse(res.data.value).data
|
||||||
|
})
|
||||||
|
|
||||||
|
// // 爱情故事列表
|
||||||
|
useFetch('/api/loveStory/getLoveStoryList', { params: queryParams }).then(res => {
|
||||||
|
total.value = JSON.parse(res.data.value).count || 0
|
||||||
|
loveStoryList.value = JSON.parse(res.data.value).data || []
|
||||||
|
console.log(loveStoryList.value, '列表');
|
||||||
|
})
|
||||||
|
|
||||||
|
// // 添加流量访问
|
||||||
|
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||||||
|
|
||||||
|
|
||||||
|
// fontSizeReactive({
|
||||||
|
// 880: 1,
|
||||||
|
// 480: 3,
|
||||||
|
// })
|
||||||
|
onMounted(() => {
|
||||||
|
htmlAddAnimations()
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped src="~/assets/css/business/love_story/index.scss"></style>
|
||||||
|
<style scoped src="~/assets/css/business/love_story/media.scss"></style>
|
||||||
|
<style scoped src="~/assets/css/index/card.css"></style>
|
||||||
100
pages/love-story/details/[id].vue
Normal file
100
pages/love-story/details/[id].vue
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<Header></Header>
|
||||||
|
|
||||||
|
<div class="joint-details-pos-box">
|
||||||
|
|
||||||
|
<div class="--box--">
|
||||||
|
|
||||||
|
<div class="music-box" v-if="loveStoryInfo.love_story_music != null">
|
||||||
|
<div class="music-name">{{ loveStoryInfo.love_story_music_name }}</div>
|
||||||
|
<audio controls="controls" height="100" width="100" autoplay>
|
||||||
|
<source :src=loveStoryInfo.love_story_music type="audio/mp3" />
|
||||||
|
<embed height="100" width="100" :src=loveStoryInfo.love_story_music />
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 返回 -->
|
||||||
|
<div class="back-btn" @click="router.back()">
|
||||||
|
← 返回
|
||||||
|
</div>
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="joint-details-title-box" data-animation="animate__animated animate__zoomIn">
|
||||||
|
<div class="joint-details-title">{{ loveStoryInfo.love_story_title }}</div>
|
||||||
|
<div class="joint-details-time">{{ loveStoryInfo.love_story_date }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="joint-details-content-box op0" data-animation="animate__animated animate__fadeIn"
|
||||||
|
v-html=loveStoryInfo.love_story_content></div>
|
||||||
|
|
||||||
|
<!-- 翻篇 -->
|
||||||
|
<div class="Turn-the-page op0" data-animation="animate__animated animate__fadeIn">
|
||||||
|
<hr>
|
||||||
|
<div class="Turn-the-page-box">
|
||||||
|
<nuxt-link class="f1" v-if="loveStoryInfo.prve"
|
||||||
|
:to="'/love-story/details/' + loveStoryInfo.prve.love_story_id">上一篇: {{
|
||||||
|
loveStoryInfo.prve.love_story_title }}</nuxt-link>
|
||||||
|
<nuxt-link class="f1" v-if="loveStoryInfo.next"
|
||||||
|
:to="'/love-story/details/' + loveStoryInfo.next.love_story_id">下一篇: {{
|
||||||
|
loveStoryInfo.next.love_story_title }}</nuxt-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Final></Final>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// --- 接口对接 ---
|
||||||
|
// 参数
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
// 预对接
|
||||||
|
let loveStoryInfo = ref(
|
||||||
|
{
|
||||||
|
// love_story_id : 2,
|
||||||
|
// love_story_title : "暑假初见1",
|
||||||
|
// love_story_author : "lwh1",
|
||||||
|
// love_story_place : "广州南站1",
|
||||||
|
// love_story_date : "2023-07-07",
|
||||||
|
// love_story_cover : "/uploads/LoveStoryImg/20230824\\ed099c7eac8b171c38814b985b4f5de5.jpg",
|
||||||
|
// love_story_sort : 1,
|
||||||
|
// love_story_music : "/uploads/LoveStoryFile/凄美地-郭顶.128.mp3",
|
||||||
|
// love_story_music_name : "凄美地-郭顶.128.mp3",
|
||||||
|
// love_story_content : "<p>1111<img src=\"/uploads/Img/20230824\\03cd04de8e390129fe731493333a68bc.png\" alt=\"\" data-href=\"\" style=\"\"/></p>"
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 获取新闻详情
|
||||||
|
useFetch('/api/loveStory/getLoveStoryInfo', { params: { love_story_id: route.params.id } }).then(res => {
|
||||||
|
loveStoryInfo.value = JSON.parse(res.data.value).data
|
||||||
|
console.log(loveStoryInfo.value, 'asdasddasd');
|
||||||
|
setTimeout(() => {
|
||||||
|
[...document.querySelectorAll('.joint-details-content-box img')].map(item => {
|
||||||
|
item.style.maxWidth = 100 + '%'
|
||||||
|
item.style.height = 0 + '%'
|
||||||
|
})
|
||||||
|
|
||||||
|
htmlAddAnimations()
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
// 获取Tdk
|
||||||
|
let tdk = ref({})
|
||||||
|
// useFetch('/api/tdk/getTdk', { params: { tdk_type: 3 } }).then(res => {
|
||||||
|
// tdk.value = JSON.parse(res.data.value).data
|
||||||
|
// })
|
||||||
|
// 添加流量访问
|
||||||
|
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped src="~/assets/css/business/love_story/love_story_details/index.scss"></style>
|
||||||
|
<style scoped src="~/assets/css/business/love_story/love_story_details/media.scss"></style>
|
||||||
17
pages/music.vue
Normal file
17
pages/music.vue
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<audio controls="controls" height="100" width="100">
|
||||||
|
<source src="~/assets/music/music-1.mp3" type="audio/mp3" />
|
||||||
|
<embed height="100" width="100" src="~/assets/music/music-1.mp3" />
|
||||||
|
</audio>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@ -1,167 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Head>
|
|
||||||
<Title>{{ tdkNewType }}{{ tdk.tdk_title }}</Title>
|
|
||||||
<Meta :content=tdk.tdk_keyword name="keywords" />
|
|
||||||
<Meta :content=tdk.tdk_description name="description" />
|
|
||||||
</Head>
|
|
||||||
<Header></Header>
|
|
||||||
<Poster :type=1></Poster>
|
|
||||||
|
|
||||||
<div class="background_box">
|
|
||||||
|
|
||||||
<!-- 新闻类型 -->
|
|
||||||
<div class="news-titile-pos-box">
|
|
||||||
<div class="news-title-box" v-for="(item, index) in newsTypeList" :key="index">
|
|
||||||
<div :class="active.idx === index ? 'news-title news-title-active' : 'news-title'"
|
|
||||||
@click="handleClickType(index)">{{ item.dictionary_name }}</div>
|
|
||||||
<div class="news-title-line" v-if="index !== newsTypeList.length - 1"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main class="container ">
|
|
||||||
<!--招生新闻-->
|
|
||||||
<div class="news-container-box container">
|
|
||||||
|
|
||||||
<!-- 模块渲染列表 -->
|
|
||||||
<div v-if="newsList.length != 0" class="news-big-box row animate__animated animate__fadeIn">
|
|
||||||
<div class="news-box col-lg-12" v-for="(item, index) in newsList">
|
|
||||||
<div class="news-s-box">
|
|
||||||
<nuxt-link :to="getLink(item)" class="jump">
|
|
||||||
<div class="news-contianer" style="border: 1px solid #e5e4e4">
|
|
||||||
<div class="news-content-box">
|
|
||||||
<div class="news-cover-box">
|
|
||||||
<img :src=item.news_cover>
|
|
||||||
</div>
|
|
||||||
<div class="news-content-right-box">
|
|
||||||
<div class="news-title">{{ item.news_title }}</div>
|
|
||||||
<div class="news-time">{{ item.news_issue_date }}</div>
|
|
||||||
<div class="news-intro">{{ item.news_intro }}</div>
|
|
||||||
<el-button type="info">查看详情</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="list_none" v-else>
|
|
||||||
<el-empty description="暂无数据" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="page-box">
|
|
||||||
<pagination class="page" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit"
|
|
||||||
@pagination="routerJump()" />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Final></Final>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
// 预对接
|
|
||||||
let newsList = ref(
|
|
||||||
[
|
|
||||||
// {
|
|
||||||
// news_id: '1',
|
|
||||||
// news_title: "米尔喊你抽奖啦！NXP i.MX开发板、米家台灯、血压计等礼品~",
|
|
||||||
// news_intro: "一年一度端午节，与往常不一样的是今年的端午节多了一个特别的礼物那就是米尔将联合XP福利送~\n免费赠送i.MX开发板、台灯、血压计快来参与，你就是锦鲤~一等奖(5名)米尔基于NXPi.MX6U儿的开发板（价值558元）\n",
|
|
||||||
// news_cover: "/uploads/NewsImg/20230629\\b3897ad4ecce0204b2086110539ec1b3.jpg",
|
|
||||||
// news_issue_date: "2023-02-23",
|
|
||||||
// },
|
|
||||||
]
|
|
||||||
)
|
|
||||||
|
|
||||||
let newsTypeList = ref([
|
|
||||||
{
|
|
||||||
dictionary_name: '---',
|
|
||||||
idx: 0
|
|
||||||
},
|
|
||||||
])
|
|
||||||
let tdkNewType = ref()
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
let active = reactive({ idx: Number(route.params.idx), name: newsTypeList.value[0] })
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(active, (nv) => {
|
|
||||||
router.push(String(nv['idx']) + "-1")
|
|
||||||
})
|
|
||||||
|
|
||||||
// --- 参数 ---
|
|
||||||
let total = ref(0)
|
|
||||||
const queryParams = reactive({
|
|
||||||
page: parseInt(route.params.page) || 1,
|
|
||||||
idx: parseInt(route.params.idx) || 0,
|
|
||||||
limit: 10
|
|
||||||
})
|
|
||||||
|
|
||||||
// --- 方法 ---
|
|
||||||
const routerJump = function () {
|
|
||||||
let { page } = queryParams
|
|
||||||
router.push(String(newsTypeList.value[active['idx']]) + "-" + String(page))
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClickType = function (index) {
|
|
||||||
let { page } = queryParams
|
|
||||||
router.push(String(index) + "-" + String(page))
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLink = function (item) {
|
|
||||||
if (item.news_link) {
|
|
||||||
return item.news_link;
|
|
||||||
} else {
|
|
||||||
return "/news/details/" + item.news_id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 接口对接
|
|
||||||
*/
|
|
||||||
|
|
||||||
// 获取Tdk
|
|
||||||
let tdk = ref({})
|
|
||||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
|
|
||||||
tdk.value = JSON.parse(res.data.value).data
|
|
||||||
})
|
|
||||||
|
|
||||||
// 获取新闻类型
|
|
||||||
useFetch('/api/news/getNewsType').then(res => {
|
|
||||||
newsTypeList.value = JSON.parse(res.data.value).data || []
|
|
||||||
tdkNewType.value = newsTypeList?.value[active.idx]?.dictionary_name
|
|
||||||
})
|
|
||||||
|
|
||||||
// // 获取新闻列表
|
|
||||||
useFetch('/api/news/getNewsList', { params: queryParams }).then(res => {
|
|
||||||
total.value = JSON.parse(res.data.value).count || 0
|
|
||||||
newsList.value = JSON.parse(res.data.value).data || []
|
|
||||||
})
|
|
||||||
|
|
||||||
// // 添加流量访问
|
|
||||||
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
|
||||||
|
|
||||||
|
|
||||||
// fontSizeReactive({
|
|
||||||
// 880: 1,
|
|
||||||
// 480: 3,
|
|
||||||
// })
|
|
||||||
onMounted(() => {
|
|
||||||
htmlAddAnimations()
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped src="~/assets/css/business/news/index.scss"></style>
|
|
||||||
<style scoped src="~/assets/css/business/news/media.scss"></style>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Head>
|
|
||||||
<Title>{{ infoArticleInfo.info_article_title }}{{ tdk.tdk_title }}</Title>
|
|
||||||
<Meta :content=tdk.tdk_keyword name="keywords" />
|
|
||||||
<Meta :content=tdk.tdk_description name="description" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<Header></Header>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<Final></Final>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
// --- 接口对接 ---
|
|
||||||
// 参数
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
// 预对接
|
|
||||||
let infoArticleInfo = ref({})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 获取新闻详情
|
|
||||||
// useFetch('/api/news/getinfoArticleInfo', { params: { info_article_id: route.params.id } }).then(res => {
|
|
||||||
// infoArticleInfo.value = JSON.parse(res.data.value).data
|
|
||||||
|
|
||||||
// setTimeout(() => {
|
|
||||||
// [...document.querySelectorAll('.joint-details-content-box img')].map(item => {
|
|
||||||
// item.style.maxWidth = 100 + '%'
|
|
||||||
// item.style.height = 0 + '%'
|
|
||||||
// })
|
|
||||||
|
|
||||||
// htmlAddAnimations()
|
|
||||||
// });
|
|
||||||
|
|
||||||
// })
|
|
||||||
// 获取Tdk
|
|
||||||
let tdk = ref({})
|
|
||||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: route.name } }).then(res => {
|
|
||||||
tdk.value = JSON.parse(res.data.value).data
|
|
||||||
})
|
|
||||||
// 添加流量访问
|
|
||||||
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped src="~/assets/css/business/news/news_details/index.scss"></style>
|
|
||||||
<style scoped src="~/assets/css/business/news/news_details/media.scss"></style>
|
|
||||||
65
pages/todo-list.vue
Normal file
65
pages/todo-list.vue
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="todo-list-big-box">
|
||||||
|
<div class="todo-list-box" v-for="(item) in 3">
|
||||||
|
<div class="todo-list-check-box">
|
||||||
|
<img alt="" class="todo-list-check-img" src="https://www.mitangguan.cn/img/mitangguan/complete.png">
|
||||||
|
</div>
|
||||||
|
<div class="todo-list-text-box">
|
||||||
|
<div class="todo-list-text">一起去川西！</div>
|
||||||
|
<div class="todo-list-time">2023-02-07</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup >
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.todo-list-big-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-box {
|
||||||
|
height: 120px;
|
||||||
|
width: 80%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0px 0px 0px 20px;
|
||||||
|
background-color: rgb(229, 229, 229);
|
||||||
|
border-radius: 40px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-check-box {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
margin: 0px 0px 0px 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-check-img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-text-box {
|
||||||
|
margin: 0px 0px 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-time {
|
||||||
|
margin: 5px 0px 0px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list-text {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
BIN
public/img/home/monment-img.jpg
Normal file
BIN
public/img/home/monment-img.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
public/img/home/monment.png
Normal file
BIN
public/img/home/monment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
@ -10,7 +10,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
const method = getMethod(event).toUpperCase()
|
const method = getMethod(event).toUpperCase()
|
||||||
let body
|
let body
|
||||||
if (method !== 'GET') body = await readRawBody(event)
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
const res = await $fetch( "http://mr.api.aerwen.net/api.php/Banners.Banner/getBannerList", {
|
const res = await $fetch(baseURL + "/Banners.Banner/getBannerList", {
|
||||||
method,
|
method,
|
||||||
baseURL: event.context.baseUrl,
|
baseURL: event.context.baseUrl,
|
||||||
headers: event.context.headers,
|
headers: event.context.headers,
|
||||||
|
|||||||
@ -10,7 +10,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
const method = getMethod(event).toUpperCase()
|
const method = getMethod(event).toUpperCase()
|
||||||
let body
|
let body
|
||||||
if (method !== 'GET') body = await readRawBody(event)
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
const res = await $fetch("http://mr.api.aerwen.net/api.php/Flow.Flow/AddFlowRecord", {
|
const res = await $fetch(baseURL + "/Flow.Flow/AddFlowRecord", {
|
||||||
method,
|
method,
|
||||||
baseURL: event.context.baseUrl,
|
baseURL: event.context.baseUrl,
|
||||||
headers: event.context.headers,
|
headers: event.context.headers,
|
||||||
|
|||||||
@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
const method = getMethod(event).toUpperCase()
|
const method = getMethod(event).toUpperCase()
|
||||||
let body
|
let body
|
||||||
if (method !== 'GET') body = await readRawBody(event)
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
const res = await $fetch("http://mr.api.aerwen.net/api.php/Home.Home/getHome", {
|
const res = await $fetch(baseURL + "/Home.Home/getHome", {
|
||||||
method,
|
method,
|
||||||
baseURL: event.context.baseUrl,
|
baseURL: event.context.baseUrl,
|
||||||
headers: event.context.headers,
|
headers: event.context.headers,
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import {
|
|||||||
} from 'h3'
|
} from 'h3'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取新闻详情
|
* 获取爱情故事详情
|
||||||
*/
|
*/
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
// 基础url
|
// 基础url
|
||||||
@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
const method = getMethod(event).toUpperCase()
|
const method = getMethod(event).toUpperCase()
|
||||||
let body
|
let body
|
||||||
if (method !== 'GET') body = await readRawBody(event)
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
const res = await $fetch("http://mr.api.aerwen.net/api.php/News.News/getinfoNews", {
|
const res = await $fetch(baseURL + "/LoveStory.LoveStory/getLoveStoryInfo", {
|
||||||
method,
|
method,
|
||||||
baseURL: event.context.baseUrl,
|
baseURL: event.context.baseUrl,
|
||||||
headers: event.context.headers,
|
headers: event.context.headers,
|
||||||
@ -5,7 +5,7 @@ import {
|
|||||||
} from 'h3'
|
} from 'h3'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取新闻列表
|
* 获取爱情故事列表
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
@ -14,7 +14,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
const method = getMethod(event).toUpperCase()
|
const method = getMethod(event).toUpperCase()
|
||||||
let body
|
let body
|
||||||
if (method !== 'GET') body = await readRawBody(event)
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
const res = await $fetch("http://mr.api.aerwen.net/api.php/News.News/getNewsList", {
|
const res = await $fetch(baseURL + "/LoveStory.LoveStory/getLoveStoryList", {
|
||||||
method,
|
method,
|
||||||
baseURL: event.context.baseUrl,
|
baseURL: event.context.baseUrl,
|
||||||
headers: event.context.headers,
|
headers: event.context.headers,
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import {
|
|
||||||
readRawBody,
|
|
||||||
getQuery,
|
|
||||||
getMethod
|
|
||||||
} from 'h3'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取新闻类型列表
|
|
||||||
*/
|
|
||||||
export default defineEventHandler(async (event) => {
|
|
||||||
// 基础url
|
|
||||||
const baseURL = process.env.NUXT_PROXY_WEB_API
|
|
||||||
const method = getMethod(event).toUpperCase()
|
|
||||||
let body
|
|
||||||
if (method !== 'GET') body = await readRawBody(event)
|
|
||||||
const res = await $fetch("http://mr.api.aerwen.net/api.php/News.News/getNewsType", {
|
|
||||||
method,
|
|
||||||
baseURL: event.context.baseUrl,
|
|
||||||
headers: event.context.headers,
|
|
||||||
params: getQuery(event),
|
|
||||||
body
|
|
||||||
})
|
|
||||||
return res
|
|
||||||
})
|
|
||||||
@ -10,7 +10,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
const method = getMethod(event).toUpperCase()
|
const method = getMethod(event).toUpperCase()
|
||||||
let body
|
let body
|
||||||
if (method !== 'GET') body = await readRawBody(event)
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
const res = await $fetch("http://mr.api.aerwen.net/api.php/Banners.Poster/getPoster", {
|
const res = await $fetch(baseURL + "/Banners.Poster/getPoster", {
|
||||||
method,
|
method,
|
||||||
baseURL: event.context.baseUrl,
|
baseURL: event.context.baseUrl,
|
||||||
headers: event.context.headers,
|
headers: event.context.headers,
|
||||||
|
|||||||
@ -10,7 +10,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
const method = getMethod(event).toUpperCase()
|
const method = getMethod(event).toUpperCase()
|
||||||
let body
|
let body
|
||||||
if (method !== 'GET') body = await readRawBody(event)
|
if (method !== 'GET') body = await readRawBody(event)
|
||||||
const res = await $fetch( "http://mr.api.aerwen.net/api.php/Tdk.Tdk/getTdkInfo", {
|
const res = await $fetch(baseURL + "/Tdk.Tdk/getTdkInfo", {
|
||||||
method,
|
method,
|
||||||
baseURL: event.context.baseUrl,
|
baseURL: event.context.baseUrl,
|
||||||
headers: event.context.headers,
|
headers: event.context.headers,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user