generated from nuxt/nuxt_site
feat 静态完成V1.0
This commit is contained in:
Abbh1
parent
30525332ad
commit
1f6e77d406
@ -6,6 +6,9 @@
|
||||
margin-top: 135px;
|
||||
|
||||
.carousel-box {
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
|
||||
|
||||
.carousel-items {
|
||||
display: flex;
|
||||
@ -16,6 +19,7 @@
|
||||
margin: var(--swipermargin);
|
||||
padding: var(--swiperpadding);
|
||||
background: var(--swiperbackground);
|
||||
cursor: pointer;
|
||||
|
||||
&>img {
|
||||
height: 100%;
|
||||
@ -26,19 +30,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
// .swiper-slide {
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
.swiper-slide img {
|
||||
width: 60vw !important;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
object-fit: cover !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
// .swiper-slide img {
|
||||
// width: 100% !important;
|
||||
// border-radius: 15px;
|
||||
// overflow: hidden;
|
||||
// object-fit: cover !important;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
.swiper::v-deep(.swiper-pagination .swiper-pagination-bullet) {
|
||||
color: var(--paginationcolor);
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
height: 40vw!important;
|
||||
}
|
||||
.carousel-items{
|
||||
height: 55vw!important;
|
||||
height: 50vw!important;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
.float-items {
|
||||
text-align: center;
|
||||
color: white;
|
||||
color: #A3A3A3;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -45,32 +45,38 @@
|
||||
|
||||
.Final-container {
|
||||
// 底部背景颜色
|
||||
background: #000000;
|
||||
background: rgb(252, 252, 252);
|
||||
position: relative;
|
||||
color: white;
|
||||
padding: 80px 0px 0px;
|
||||
color: #A3A3A3;
|
||||
padding: 50px 0px 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.Final-big-box {
|
||||
width: 100%;
|
||||
width: 70%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
// justify-content: space-evenly;
|
||||
justify-content: start;
|
||||
margin: 0 auto;
|
||||
|
||||
.Final-left-box {
|
||||
max-width: 40vh;
|
||||
font-size: 16px;
|
||||
|
||||
|
||||
.Final-left-title {
|
||||
margin: 30px 0;
|
||||
margin: 10px 0;
|
||||
color: #A3A3A3 !important;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Final-left-info-item {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.Final-left-info-item-icon {
|
||||
margin-right: 10px;
|
||||
@ -78,15 +84,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Final-icon-box {
|
||||
height: 60px;
|
||||
width: 120px;
|
||||
|
||||
.icon-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.icon-img {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.Final-right-box {
|
||||
@ -145,7 +147,7 @@
|
||||
|
||||
.items {
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
color: #A3A3A3;
|
||||
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
@ -193,17 +195,21 @@
|
||||
}
|
||||
|
||||
.Final-bottom-box {
|
||||
width: 90%;
|
||||
width: 70%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30px 0;
|
||||
color: white;
|
||||
color: #A3A3A3;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
// 底部版权颜色
|
||||
background-color: #000000;
|
||||
border-top: 1px solid #4d4d4d;
|
||||
background-color: rgb(252, 252, 252);
|
||||
border-top: 1px solid #e9e9e9;
|
||||
|
||||
div{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -250,7 +256,7 @@
|
||||
.items-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
color: white;
|
||||
color: #A3A3A3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -273,7 +279,7 @@
|
||||
top: 0;
|
||||
|
||||
.share-box {
|
||||
background: white;
|
||||
background: #A3A3A3;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
height: fit-content;
|
||||
|
||||
@ -116,4 +116,198 @@
|
||||
.phone-box {
|
||||
display: none;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
||||
.overlay {
|
||||
position: fixed; /* 固定在视口上 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
z-index: 999999999;
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 300px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #240046;
|
||||
max-height: 460px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
box-shadow: 7px 7px 10px 3px #24004628;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/*checkbox to switch from sign up to login*/
|
||||
#chk {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Login*/
|
||||
.login {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login label {
|
||||
margin: 25% 0 5%;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: .5s ease-in-out;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #e0dede;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*Register*/
|
||||
.register {
|
||||
background: #eee;
|
||||
border-radius: 60% / 10%;
|
||||
transform: translateY(5%);
|
||||
transition: .8s ease-in-out;
|
||||
}
|
||||
|
||||
.register label {
|
||||
color: #573b8a;
|
||||
transform: scale(.6);
|
||||
}
|
||||
|
||||
#chk:checked ~ .register {
|
||||
transform: translateY(-60%);
|
||||
}
|
||||
|
||||
#chk:checked ~ .register label {
|
||||
transform: scale(1);
|
||||
margin: 10% 0 5%;
|
||||
}
|
||||
|
||||
#chk:checked ~ .login label {
|
||||
transform: scale(.6);
|
||||
margin: 5% 0 5%;
|
||||
}
|
||||
/*Button*/
|
||||
.form button {
|
||||
width: 85%;
|
||||
height: 40px;
|
||||
margin: 12px auto 10%;
|
||||
color: #fff;
|
||||
background: #573b8a;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: .2s ease-in;
|
||||
}
|
||||
|
||||
.form button:hover {
|
||||
background-color: #6d44b8;
|
||||
}
|
||||
|
||||
.login_cancel{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.Btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition-duration: .3s;
|
||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
|
||||
background-color: rgb(255, 65, 65);
|
||||
}
|
||||
|
||||
/* plus sign */
|
||||
.sign {
|
||||
width: 100%;
|
||||
transition-duration: .3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sign svg {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.sign svg path {
|
||||
fill: white;
|
||||
}
|
||||
/* text */
|
||||
.text {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 0%;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
/* hover effect on button width */
|
||||
.Btn:hover {
|
||||
width: 125px;
|
||||
border-radius: 40px;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
.Btn:hover .sign {
|
||||
width: 30%;
|
||||
transition-duration: .3s;
|
||||
padding-left: 20px;
|
||||
}
|
||||
/* hover effect button's text */
|
||||
.Btn:hover .text {
|
||||
opacity: 1;
|
||||
width: 70%;
|
||||
transition-duration: .3s;
|
||||
padding-right: 10px;
|
||||
}
|
||||
/* button click effect*/
|
||||
.Btn:active {
|
||||
transform: translate(2px ,2px);
|
||||
}
|
||||
103
assets/css/business/center/index.scss
Normal file
103
assets/css/business/center/index.scss
Normal file
@ -0,0 +1,103 @@
|
||||
.Center-main {
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.center-top-pos-box {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.center-top-box {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 10px rgba(116, 116, 116, 0.08);
|
||||
overflow: hidden;
|
||||
transition: .3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.center-top-cover-box {
|
||||
width: 100%;
|
||||
height: 78%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.center-top-cover-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.center-user-box {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 20px 80px;
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.center-user-img-box {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
.center-user-img-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.center-user-content-in-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 140px;
|
||||
}
|
||||
|
||||
.center-user-content-name {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.center-user-content-intro{
|
||||
font-size: 16px;
|
||||
color: #B4B4B4;
|
||||
}
|
||||
|
||||
|
||||
.center-content-box{
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 10px rgba(116, 116, 116, 0.08);
|
||||
padding: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.content-box{
|
||||
height: 380px !important;
|
||||
}
|
||||
|
||||
.content-list-box{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
font-size: 18px !important;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
|
||||
|
||||
31
assets/css/business/center/media.scss
Normal file
31
assets/css/business/center/media.scss
Normal file
@ -0,0 +1,31 @@
|
||||
/*1440px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (min-width: 1440px) {}
|
||||
|
||||
/*1200px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1200px) {}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 1200px) {}
|
||||
|
||||
/*880px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 880px) {}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 880px) {}
|
||||
|
||||
/*480px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 480px) {}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 480px) {
|
||||
.center-user-box{
|
||||
padding: 20px 0 !important;
|
||||
}
|
||||
}
|
||||
@ -28,6 +28,7 @@
|
||||
.contactus_way {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@ -68,7 +69,7 @@
|
||||
}
|
||||
|
||||
.ways i {
|
||||
color: #A72027;
|
||||
color: #82E7D4;
|
||||
text-align: center;
|
||||
margin: 0 auto 10px auto;
|
||||
font-size: 50px;
|
||||
@ -161,7 +162,7 @@
|
||||
}
|
||||
|
||||
.feedbackForm .btn {
|
||||
background: #A72027;
|
||||
background: #82E7D4;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -185,4 +185,77 @@
|
||||
.page-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 搜索框
|
||||
.search-big-box{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 15px;
|
||||
background-color: #F9F9F9;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-select{
|
||||
|
||||
}
|
||||
|
||||
|
||||
.searchBox {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
width: 500px;
|
||||
max-width: 500px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
background: #2f3640;
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
color: white;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: var(--gradient-2, linear-gradient(90deg, #2AF598 0%, #009EFD 100%));
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
|
||||
}
|
||||
/*hover effect*/
|
||||
button:hover {
|
||||
color: #fff;
|
||||
background-color: #1A1A1A;
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0 10px 20px;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
/*button pressing effect*/
|
||||
button:active {
|
||||
box-shadow: none;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
padding: 20px 46px 20px 26px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,26 +1,245 @@
|
||||
.joint-details-pos-box {
|
||||
padding-bottom: 15rem;
|
||||
.details-big-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
// 标题
|
||||
.joint-details-title-box {
|
||||
.details-pos-box {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
// 左边
|
||||
.details-left-box {
|
||||
// width: 65%;
|
||||
}
|
||||
|
||||
|
||||
.exzoom {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.exzoom_nav {
|
||||
margin-top: 15px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_nav .exzoom_nav_inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
width: 2000px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_nav .exzoom_nav_inner span {
|
||||
// border: 1px solid #ddd;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
width: 96px;
|
||||
height: 65px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.exzoom .exzoom_nav .exzoom_nav_inner span::before {
|
||||
transition: all .2s ease 0s;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.exzoom .exzoom_nav .exzoom_nav_inner span.current::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
|
||||
.exzoom .exzoom_nav .exzoom_nav_inner span img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
.exzoom_btn {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.exzoom_btn a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
// top: -62px;
|
||||
text-decoration: none;
|
||||
color: #C2C2C2;
|
||||
font-weight: 1000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.exzoom_prev_btn {}
|
||||
|
||||
.exzoom_btn a:hover {
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
.exzoom_btn a.exzoom_next_btn {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.preview-box{
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
// 左边详情
|
||||
.left-detail-pos-box{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-detail-box{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.left-detail-title{
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.left-detail-content{
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 右边
|
||||
.details-right-box {
|
||||
// width: 34%;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
|
||||
.details-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
||||
.content-user-box {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0rem 0 2rem 0;
|
||||
|
||||
.joint-details-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
font-family: '阿里妈妈数黑体';
|
||||
}
|
||||
|
||||
.joint-details-time {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content-user-img-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-user-name {
|
||||
width: 120px;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content-user-content-box {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.content-price {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.content-rate-icon-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-rate-icon {
|
||||
font-size: 17px;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 1px;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.content-rate-num {
|
||||
font-size: 12px;
|
||||
color: #8FA0B7;
|
||||
}
|
||||
|
||||
.content-category {
|
||||
font-size: 14px;
|
||||
color: #8FA0B7;
|
||||
}
|
||||
|
||||
.content-rate-line {
|
||||
height: 100%;
|
||||
margin: 0px 5px;
|
||||
color: #8FA0B7;
|
||||
}
|
||||
|
||||
|
||||
.content-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E4E4E4;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.detail-icon-box {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.detail-rate-icon {
|
||||
font-size: 20px !important;
|
||||
font-weight: bold !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.detail-rate-text {
|
||||
font-size: 15px !important;
|
||||
color: #212121;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.return {
|
||||
width: 60px;
|
||||
height: 50%;
|
||||
@ -42,4 +261,321 @@
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.play-btn-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
// 按钮
|
||||
.play-btn {
|
||||
position: relative;
|
||||
width: 11em;
|
||||
height: 4em;
|
||||
outline: none;
|
||||
transition: 0.1s;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
#clip {
|
||||
--color: #2761c3;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 5px double var(--color);
|
||||
box-shadow: inset 0px 0px 15px #8FA0B7;
|
||||
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
||||
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
transition: 0.2s;
|
||||
background-color: #2761c3;
|
||||
top: 35%;
|
||||
width: 11%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
#leftArrow {
|
||||
left: -13.5%;
|
||||
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
|
||||
}
|
||||
|
||||
#rightArrow {
|
||||
-webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
|
||||
left: 109%;
|
||||
}
|
||||
|
||||
button:hover #rightArrow {
|
||||
background-color: #27c39f;
|
||||
left: -15%;
|
||||
animation: 0.6s ease-in-out both infinite alternate rightArrow8;
|
||||
}
|
||||
|
||||
button:hover #leftArrow {
|
||||
background-color: #27c39f;
|
||||
left: 103%;
|
||||
animation: 0.6s ease-in-out both infinite alternate leftArrow8;
|
||||
}
|
||||
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
background-color: #2761c3;
|
||||
box-shadow: inset 1px 1px 8px #2781c3;
|
||||
transform: scale(1) rotate(45deg);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
#rightTop {
|
||||
top: -1.98em;
|
||||
left: 91%;
|
||||
}
|
||||
|
||||
#leftTop {
|
||||
top: -1.96em;
|
||||
left: -3.0em;
|
||||
}
|
||||
|
||||
#leftBottom {
|
||||
top: 2.10em;
|
||||
left: -2.15em;
|
||||
}
|
||||
|
||||
#rightBottom {
|
||||
top: 45%;
|
||||
left: 88%;
|
||||
}
|
||||
|
||||
button:hover #leftTop {
|
||||
animation: 0.1s ease-in-out 0.05s both changeColor8,
|
||||
0.2s linear 0.4s both lightEffect8;
|
||||
}
|
||||
|
||||
button:hover #rightTop {
|
||||
animation: 0.1s ease-in-out 0.15s both changeColor8,
|
||||
0.2s linear 0.4s both lightEffect8;
|
||||
}
|
||||
|
||||
button:hover #rightBottom {
|
||||
animation: 0.1s ease-in-out 0.25s both changeColor8,
|
||||
0.2s linear 0.4s both lightEffect8;
|
||||
}
|
||||
|
||||
button:hover #leftBottom {
|
||||
animation: 0.1s ease-in-out 0.35s both changeColor8,
|
||||
0.2s linear 0.4s both lightEffect8;
|
||||
}
|
||||
|
||||
button:hover .corner {
|
||||
transform: scale(1.25) rotate(45deg);
|
||||
}
|
||||
|
||||
button:hover #clip {
|
||||
animation: 0.2s ease-in-out 0.55s both greenLight8;
|
||||
--color: #27c39f;
|
||||
}
|
||||
|
||||
@keyframes changeColor8 {
|
||||
from {
|
||||
background-color: #2781c3;
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: #27c39f;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightEffect8 {
|
||||
from {
|
||||
box-shadow: 1px 1px 5px #27c39f;
|
||||
}
|
||||
|
||||
to {
|
||||
box-shadow: 0 0 2px #27c39f;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes greenLight8 {
|
||||
from {}
|
||||
|
||||
to {
|
||||
box-shadow: inset 0px 0px 32px #27c39f;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leftArrow8 {
|
||||
from {
|
||||
transform: translate(0px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rightArrow8 {
|
||||
from {
|
||||
transform: translate(0px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 85%;
|
||||
height: 50px;
|
||||
background-color: #2196F3;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
transition: background-color .2s ease-in-out;
|
||||
outline: 0;
|
||||
border: none;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #6EC6FF;
|
||||
}
|
||||
|
||||
|
||||
.btn-collect {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2196F3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.btn-collect img {
|
||||
width: 50%;
|
||||
height: 55%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.right-detail-intro-pos-box{
|
||||
width: 100%;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.rightd-detail-intro-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.rightd-detail-intro-title{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rightd-detail-intro-content{
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.Instructions{
|
||||
font-weight: bold;
|
||||
color: #E71225;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
//评论
|
||||
.right-comment-pos-box{
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.right-comment-input-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content-comment-user-img-box{
|
||||
width: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-comment-user-img{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.comment-input-box{
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.comment-btn{
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.custom-comment-big-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.custom-comment-content-box{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.custom-comment-content-user-name{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.custom-comment-content-text{
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.content-comment-user-img{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-comment-content-time{
|
||||
font-size: 13.5px;
|
||||
color: #9B9C9C;
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1560px !important;
|
||||
// max-width: 1560px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1560px !important;
|
||||
// max-width: 1560px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -53,16 +53,17 @@ h2:after {
|
||||
|
||||
// 海报
|
||||
.poster-box {
|
||||
margin-top: 25px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.poster-img-box {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.poster-img-box img {
|
||||
@ -72,9 +73,15 @@ h2:after {
|
||||
}
|
||||
|
||||
|
||||
.poster-img-box:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 20px rgba(164, 164, 164, 0.8);
|
||||
}
|
||||
|
||||
|
||||
// 精选推荐
|
||||
.update-big-box {
|
||||
margin-top: 35px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.content-list-box {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1560px !important;
|
||||
// max-width: 1460px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "OpenSans-Regular", Arial, Helvetica, sans-serif;
|
||||
font-family: Inter, Noto Sans SC, Noto Sans JP, Noto Sans KR, Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="Carousel-container" :style="styleContainer">
|
||||
<div class="Carousel-container container" :style="styleContainer">
|
||||
<!--
|
||||
initialSlide：默认选中第几张
|
||||
modules：引入模块
|
||||
@ -78,6 +78,7 @@ setTimeout(() => {
|
||||
|
||||
/**整体轮播图样式*/
|
||||
let styleContainer = reactive({
|
||||
width: '100%',
|
||||
height: '20vw',
|
||||
})
|
||||
const modules = ref([Pagination, Navigation, Autoplay])
|
||||
@ -86,7 +87,7 @@ const swiperStyle = conversionStyleVal(reactive({
|
||||
color: '', //设置字体颜色
|
||||
height: '20vw', //设置高度
|
||||
width: '100%', //设置高度
|
||||
margin: '0', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||||
margin: '0 auto', //设置margin 按照上 右 下 左 或 上下 左右 设置
|
||||
padding: '0', //设置padding 按照上 右 下 左 或 上下 左右 设置
|
||||
background: '', //设置背景颜色
|
||||
/**右边按钮样式*/
|
||||
|
||||
@ -5,108 +5,41 @@
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="Final op0" data-animation="animate__animated animate__fadeInUp">
|
||||
<!-- <div class="Final-float-box ">
|
||||
<div class="Final-float rootBg">
|
||||
<template v-for="item in shareList">
|
||||
<div class="float-items" @click="createShareCode(item.contact_scancode_img)">
|
||||
<img :src="item.contact_scancode_icon" alt="">
|
||||
<div>{{ item.contact_scancode_title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="Final-container font" :style="FinalStyle">
|
||||
<div class="Final-big-box">
|
||||
<!-- <div class="Final-icon-box" :style="FinalStyle.FinalLeft">
|
||||
<img src="/img/icon/logo1.ico" class="icon-img" alt="">
|
||||
</div> -->
|
||||
<div class="Final-left-box">
|
||||
<img src="/img/icon/logo.png" class="icon-img" alt="">
|
||||
<div class="Final-left-title font">{{ $t('common.footer.desc') }}</div>
|
||||
<div class="Final-icon-box">
|
||||
<img src="/img/icon/logo.png" class="icon-img" alt="">
|
||||
</div>
|
||||
<div class="Final-left-title font">阿尔文 Unity资源一站式下载</div>
|
||||
<nuxt-link class="Final-left-title font" :to=getHerf(disclaimerUrl)>
|
||||
免责申明
|
||||
</nuxt-link>
|
||||
<div class="Final-left-info font">
|
||||
<!-- <div class="Final-left-info-item">
|
||||
<div class="Final-left-info-item-icon">
|
||||
<img src="/img/icon/Final_left_img.png" alt="">
|
||||
</div>
|
||||
<div>{{ $t('common.footer.loc') }}</div>
|
||||
</div> -->
|
||||
<div class="Final-left-info-item">
|
||||
<div class="Final-left-info-item-icon">
|
||||
<img src="/img/icon/Final_left_img3.png" alt="">
|
||||
</div>
|
||||
<div>postmaster@lbie-group.com</div>
|
||||
<div>2679599887@qq.com</div>
|
||||
</div>
|
||||
<div class="Final-left-info-item">
|
||||
<div class="Final-left-info-item-icon">
|
||||
<img src="/img/icon/Final_left_img2.png" alt="">
|
||||
</div>
|
||||
<div>17702075449</div>
|
||||
<div>13909751407</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="Final-middle-box" :style="FinalStyle.FinalMiddle">
|
||||
<div class="Final-middle-items">
|
||||
<div class="items-title">{{ $t("common.footer.fastLink") }}</div>
|
||||
<div class="items-title-line"></div>
|
||||
<nuxt-link :to="getHerf('/about')">
|
||||
<div class="items">{{ $t("common.header.about") }}</div>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="getHerf('/news/1-1')">
|
||||
<div class="items">{{ $t("common.header.news") }}</div>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="getHerf('/contact')">
|
||||
<div class="items">{{ $t("common.header.contact") }}</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="Final-middle-items">
|
||||
<div class="items-title">{{ $t("common.footer.usefulLinks") }}</div>
|
||||
<div class="items-title-line"></div>
|
||||
<template v-for="(item, idx) in productTypeList">
|
||||
<nuxt-link v-if="item?.name && idx < 5" :to="getHerf(item.href)">
|
||||
<div class="items">{{ item.name }}</div>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Final-right-box">
|
||||
<div class="Final-right-title font">
|
||||
{{ $t('common.footer.worktime') }}
|
||||
</div>
|
||||
<div class="Final-right-title-line"></div>
|
||||
<div class="Final-right-time">
|
||||
<div class="Final-right-time-icon">
|
||||
<img src="/img/icon/Final_right_time.png" alt="">
|
||||
</div>
|
||||
<div>{{ $t('common.footer.time') }}</div>
|
||||
</div>
|
||||
<div class="Final-right-ctx">
|
||||
{{ $t('common.footer.desc') }}
|
||||
</div>
|
||||
<nuxt-link class="Final-right-btn ible-btn font" target="_blank" :to="'tel:17702075449'">
|
||||
{{ $t('common.footer.contact') }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="Final-middle-phone-box">-->
|
||||
<!-- <div class="Final-middle-phone-title-box">-->
|
||||
<!-- <div class="Final-middle-phone-title">全国咨询热线</div>-->
|
||||
<!-- <div class="Final-middle-phone-content-box">-->
|
||||
<!-- <div v-for="(item, index) in bottomData.hoteline" class="Final-middle-phone-content">-->
|
||||
<!-- {{ item.consulting_hotline_user }} : {{ item.consulting_hotline_phone }}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="Final-code-box">
|
||||
<div class="code-text">扫描关注微信公众号</div>
|
||||
<img :src=bottomData.wx_office_accounts_img alt="微信公众号图片">
|
||||
</div> -->
|
||||
<div class="Final-bottom-box">
|
||||
<div>
|
||||
Copyright © {{ $t('common.copyright') }}
|
||||
Copyright © 佛山市顺德区昂迩文科技中心
|
||||
</div>
|
||||
<div>
|
||||
粤ICP备2023123263号-2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,7 +50,6 @@
|
||||
const { t, locale } = useI18n()
|
||||
// 样式配置
|
||||
const FinalStyle = {
|
||||
padding: "80px 0 0 0",
|
||||
FinalLeft: {},
|
||||
FinalMiddle: {},
|
||||
}
|
||||
@ -157,7 +89,7 @@ let bottomData = ref({})
|
||||
// bottomData.value = resValue
|
||||
// shareList.value = resValue.qrcode
|
||||
// })
|
||||
|
||||
const disclaimerUrl = ref("/disclaimer")
|
||||
|
||||
//请求产品
|
||||
useFetch('/api/product/getProductTypeTree', { params: { locale: locale.value } }).then(res => {
|
||||
@ -166,7 +98,7 @@ useFetch('/api/product/getProductTypeTree', { params: { locale: locale.value } }
|
||||
for (let key in data) {
|
||||
let obj = {}
|
||||
obj.name = data[key].product_type_name
|
||||
obj.href = '/product/product_list/' + data[key]['product_type_id'] + '-1'
|
||||
obj.href = '/project/project/' + data[key]['product_type_id'] + '-1'
|
||||
res.push(obj)
|
||||
}
|
||||
productTypeList.value = res
|
||||
|
||||
@ -2,16 +2,37 @@
|
||||
<div class="HeaderSearch" :style="[props.HeaderSearch]">
|
||||
<div class="HeaderSearch-container">
|
||||
<div class="HeaderSearch-box">
|
||||
<img src="/img/icon/searchIcon.png" @click="showSearchBox" class="HeaderSearch-Icon" alt="">
|
||||
<img
|
||||
src="/img/icon/searchIcon.png"
|
||||
@click="showSearchBox"
|
||||
class="HeaderSearch-Icon"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<el-dropdown>
|
||||
<el-avatar class="HeaderSearch-Icon" :size="45"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<el-avatar
|
||||
v-if="!isLogin"
|
||||
@click="showLoginBox()"
|
||||
class="HeaderSearch-Icon"
|
||||
:size="45"
|
||||
src="https://blender.kim/wp-content/themes/zibll/img/avatar-default.png"
|
||||
/>
|
||||
<el-avatar
|
||||
e-else
|
||||
class="HeaderSearch-Icon"
|
||||
:size="45"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
<el-dropdown-menu v-if="isLogin">
|
||||
<el-dropdown-item>
|
||||
<nuxt-link :to="getHerf('/center')"> 个人中心 </nuxt-link>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<el-dropdown-menu v-else>
|
||||
<el-dropdown-item @click="showLoginBox()">登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
@ -23,56 +44,156 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-nav animate__animated animate__fadeIn" v-show="appNavShow" :style="props.appNav"
|
||||
@click="closeAppNavShow($event)">
|
||||
<div
|
||||
class="app-nav animate__animated animate__fadeIn"
|
||||
v-show="appNavShow"
|
||||
:style="props.appNav"
|
||||
@click="closeAppNavShow($event)"
|
||||
>
|
||||
<div class="app-box" @click="closeAppNavShow($event)">
|
||||
<nuxt-link :to="getHerf(item.href)" class="app-nav-items" v-for="item in props.navList" :key="item.name"
|
||||
@click="appNavItemEvent(item, $event.target)">
|
||||
<div @click="appNavItemEvent(item, $event.target.parentElement)">{{ item.name }}</div>
|
||||
<nuxt-link :to="getHerf(_item['href'])" class="app-nav-second-items animate__animated animate__fadeIn dNone"
|
||||
v-for="_item in item.children" :key="_item.name">
|
||||
<nuxt-link
|
||||
:to="getHerf(item.href)"
|
||||
class="app-nav-items"
|
||||
v-for="item in props.navList"
|
||||
:key="item.name"
|
||||
@click="appNavItemEvent(item, $event.target)"
|
||||
>
|
||||
<div @click="appNavItemEvent(item, $event.target.parentElement)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<nuxt-link
|
||||
:to="getHerf(_item['href'])"
|
||||
class="app-nav-second-items animate__animated animate__fadeIn dNone"
|
||||
v-for="_item in item.children"
|
||||
:key="_item.name"
|
||||
>
|
||||
<div>{{ _item.name }}</div>
|
||||
</nuxt-link>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overlay hidden">
|
||||
<div class="main">
|
||||
<input type="checkbox" id="chk" aria-hidden="true" />
|
||||
|
||||
<div class="login">
|
||||
<div class="login_cancel">
|
||||
<button class="Btn" @click="hideLoginBox()">
|
||||
<div class="sign">
|
||||
<svg viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="text">取消</div>
|
||||
</button>
|
||||
</div>
|
||||
<form class="form">
|
||||
<label for="chk" aria-hidden="true">Log in</label>
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
required=""
|
||||
/>
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
name="pswd"
|
||||
placeholder="Password"
|
||||
required=""
|
||||
/>
|
||||
<button>Log in</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="register">
|
||||
<form class="form">
|
||||
<label for="chk" aria-hidden="true">Register</label>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
name="txt"
|
||||
placeholder="Username"
|
||||
required=""
|
||||
/>
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
required=""
|
||||
/>
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
name="pswd"
|
||||
placeholder="Password"
|
||||
required=""
|
||||
/>
|
||||
<button>Register</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const appNavShow = ref(false)
|
||||
const log = console.log
|
||||
const appNavShow = ref(false);
|
||||
const log = console.log;
|
||||
const isLogin = ref(false);
|
||||
const props = defineProps({
|
||||
HeaderSearch: Object,
|
||||
appNav: Object,
|
||||
navList: Array
|
||||
})
|
||||
navList: Array,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['showSearchBox'])
|
||||
const emit = defineEmits(["showSearchBox"]);
|
||||
const appNavItemEvent = function (item, e) {
|
||||
if (item.children.length !== 0) {
|
||||
let tag = e
|
||||
tag.classList.toggle('active');
|
||||
[...tag.children].filter(item => item.nodeName === 'A').map(item => {
|
||||
item.classList.toggle('dNone')
|
||||
})
|
||||
let tag = e;
|
||||
tag.classList.toggle("active");
|
||||
[...tag.children]
|
||||
.filter((item) => item.nodeName === "A")
|
||||
.map((item) => {
|
||||
item.classList.toggle("dNone");
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const toggleAppNavShow = function () {
|
||||
appNavShow.value = !appNavShow.value
|
||||
}
|
||||
appNavShow.value = !appNavShow.value;
|
||||
};
|
||||
const closeAppNavShow = function (e) {
|
||||
let tag = e.target
|
||||
if (tag.className === 'app-nav animate__animated animate__fadeIn' || tag.className === 'app-box') {
|
||||
appNavShow.value = false
|
||||
document.body.style.overflowY = 'auto'
|
||||
let tag = e.target;
|
||||
if (
|
||||
tag.className === "app-nav animate__animated animate__fadeIn" ||
|
||||
tag.className === "app-box"
|
||||
) {
|
||||
appNavShow.value = false;
|
||||
document.body.style.overflowY = "auto";
|
||||
}
|
||||
}
|
||||
};
|
||||
const showSearchBox = function () {
|
||||
emit('showSearchBox')
|
||||
}
|
||||
emit("showSearchBox");
|
||||
};
|
||||
|
||||
const showLoginBox = function () {
|
||||
document.getElementsByClassName("overlay")[0].style.opacity = 1;
|
||||
document.getElementsByClassName("overlay")[0].style['z-index'] = 999999999;
|
||||
document.getElementsByClassName("overlay")[0].classList.toggle('hidden');
|
||||
};
|
||||
const hideLoginBox = function () {
|
||||
document.getElementsByClassName("overlay")[0].style.opacity = 0;
|
||||
document.getElementsByClassName("overlay")[0].style['z-index'] = -99999;
|
||||
document.getElementsByClassName("overlay")[0].classList.toggle('hidden');
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/Header/search.scss" lang="scss"></style>
|
||||
|
||||
@ -1,17 +1,32 @@
|
||||
<template>
|
||||
<div class="Header ">
|
||||
<div class="Header">
|
||||
<div class="Header-container" :style="[HeaderStyleOption]">
|
||||
|
||||
<HeaderIcon :HeaderIcon="HeaderStyleOption.HeaderIcon"></HeaderIcon>
|
||||
<HeaderNav :HeaderNav="HeaderStyleOption.HeaderNav" :navList="navList"></HeaderNav>
|
||||
<HeaderSearch v-if="_lazy_with_fix_" :HeaderSearch="HeaderStyleOption.HeaderSearch"
|
||||
:appNav="HeaderStyleOption.appNav" :navList="navList" @showSearchBox="showSearchBox"></HeaderSearch>
|
||||
<HeaderSearch
|
||||
v-if="_lazy_with_fix_"
|
||||
:HeaderSearch="HeaderStyleOption.HeaderSearch"
|
||||
:appNav="HeaderStyleOption.appNav"
|
||||
:navList="navList"
|
||||
@showSearchBox="showSearchBox"
|
||||
></HeaderSearch>
|
||||
</div>
|
||||
<div class="search-box " @mouseleave="showSearchHideBox([])">
|
||||
<div class="search-box" @mouseleave="showSearchHideBox([])">
|
||||
<!-- @input="searchEvent" -->
|
||||
<input type="text" class="search-box-input " v-model='inputval' @keydown="keyDownEvent" placeholder="请输入关键字回车">
|
||||
<nuxt-link @click="showSearchBox()" class="search-btn" :to="url + $('search-box-input')[0].value">搜索</nuxt-link>
|
||||
<div class="search-hide-box ">
|
||||
<input
|
||||
type="text"
|
||||
class="search-box-input"
|
||||
v-model="inputval"
|
||||
@keydown="keyDownEvent"
|
||||
placeholder="请输入关键字回车"
|
||||
/>
|
||||
<nuxt-link
|
||||
@click="showSearchBox()"
|
||||
class="search-btn"
|
||||
:to="url + $('search-box-input')[0].value"
|
||||
>搜索</nuxt-link
|
||||
>
|
||||
<div class="search-hide-box">
|
||||
<div class="search-hide-items" v-for="item in searchRes">
|
||||
<nuxtLink :to="{ path: getHerf(item.href), query: { s: item.txt } }">
|
||||
{{ item.txt }}
|
||||
@ -20,9 +35,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone-box">
|
||||
<div class="phone-box"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -30,174 +45,177 @@ import HeaderIcon from "./HeaderIcon.vue";
|
||||
import HeaderNav from "./HeaderNav.vue";
|
||||
import HeaderSearch from "./HeaderSearch.vue";
|
||||
|
||||
const $ = document ? document.getElementsByClassName.bind(document) : () => [{ value: '' }]
|
||||
const _lazy_with_fix_ = ref(false)
|
||||
setTimeout(() => _lazy_with_fix_.value = true)
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
const $ = document
|
||||
? document.getElementsByClassName.bind(document)
|
||||
: () => [{ value: "" }];
|
||||
const _lazy_with_fix_ = ref(false);
|
||||
setTimeout(() => (_lazy_with_fix_.value = true));
|
||||
const { t, locale } = useI18n();
|
||||
const router = useRouter();
|
||||
/**样式配置*/
|
||||
const HeaderStyleOption = reactive({
|
||||
|
||||
/**导航样式*/
|
||||
HeaderNav: {
|
||||
'padding-left': '2vw'
|
||||
"padding-left": "2vw",
|
||||
},
|
||||
/**icon样式*/
|
||||
HeaderIcon: {
|
||||
'padding-left': '20vw'
|
||||
"padding-left": "15vw",
|
||||
},
|
||||
/**搜索样式*/
|
||||
HeaderSearch: {
|
||||
position: ' absolute',
|
||||
right: '240px',
|
||||
position: " absolute",
|
||||
right: "240px",
|
||||
},
|
||||
/**手机菜单栏样式*/
|
||||
appNav: {
|
||||
top: ' 0',
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}
|
||||
})
|
||||
let inputval = ref('')
|
||||
let info_article_type_id = ref(0)
|
||||
top: " 0",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
},
|
||||
});
|
||||
let inputval = ref("");
|
||||
let info_article_type_id = ref(0);
|
||||
|
||||
// '/product'
|
||||
// '/product/child'
|
||||
// 'child'
|
||||
let navList = ref([
|
||||
{
|
||||
name: t('common.header.home'),
|
||||
name: t("common.header.home"),
|
||||
children: [],
|
||||
href: '/',
|
||||
alias: 'home'
|
||||
href: "/",
|
||||
alias: "home",
|
||||
},
|
||||
{
|
||||
name: "Unity工程",
|
||||
// href: '/product/product_list/0-1',
|
||||
href: "/project/1-1",
|
||||
children: [],
|
||||
alias: 'products'
|
||||
alias: "project",
|
||||
},
|
||||
{
|
||||
name: "模型",
|
||||
children: [],
|
||||
href: '/model/1-1',
|
||||
alias: 'model'
|
||||
href: "/model/1-1",
|
||||
alias: "model",
|
||||
},
|
||||
{
|
||||
name: "动画",
|
||||
children: [],
|
||||
href: '/about',
|
||||
alias: 'about'
|
||||
href: "/animation/1-1",
|
||||
alias: "animation",
|
||||
},
|
||||
{
|
||||
name: "软件下载",
|
||||
children: [],
|
||||
href: '/news/1-1',
|
||||
alias: 'news'
|
||||
href: "/software/1-1",
|
||||
alias: "software",
|
||||
},
|
||||
{
|
||||
name: t('common.header.contact'),
|
||||
name: "联系方式",
|
||||
children: [],
|
||||
href: '/contact',
|
||||
alias: 'contact'
|
||||
href: "/contact",
|
||||
alias: "contact",
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
])
|
||||
|
||||
let searchRes = ref(null)
|
||||
let searchRes = ref(null);
|
||||
|
||||
const showSearchBox = function () {
|
||||
document.getElementsByClassName('search-box')[0].classList.toggle('search-show')
|
||||
document.getElementsByClassName('search-box-input')[0].classList.toggle('search-input-show')
|
||||
}
|
||||
let timer = null
|
||||
document.getElementsByClassName("search-box")[0].classList.toggle("search-show");
|
||||
document
|
||||
.getElementsByClassName("search-box-input")[0]
|
||||
.classList.toggle("search-input-show");
|
||||
};
|
||||
|
||||
|
||||
|
||||
let timer = null;
|
||||
|
||||
const showSearchHideBox = function (data) {
|
||||
searchRes.value = data
|
||||
searchRes.value = data;
|
||||
if (data && data.length !== 0) {
|
||||
document.getElementsByClassName('search-box-input')[0].classList.add('search-have')
|
||||
document.getElementsByClassName("search-box-input")[0].classList.add("search-have");
|
||||
} else {
|
||||
document.getElementsByClassName('search-box-input')[0].classList.remove('search-have')
|
||||
document
|
||||
.getElementsByClassName("search-box-input")[0]
|
||||
.classList.remove("search-have");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**对接区域**/
|
||||
const searchEvent = function (e) {
|
||||
return
|
||||
return;
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
let searchVal = e.target.value
|
||||
useFetch('/api/product/getProductList', {
|
||||
let searchVal = e.target.value;
|
||||
useFetch("/api/product/getProductList", {
|
||||
params: {
|
||||
"product_name": searchVal || ' ',
|
||||
locale: locale.value
|
||||
}
|
||||
product_name: searchVal || " ",
|
||||
locale: locale.value,
|
||||
},
|
||||
}).then((res) => {
|
||||
let searchData = []
|
||||
let searchData = [];
|
||||
for (let item of JSON.parse(res.data.value).data) {
|
||||
let obj = {}
|
||||
obj.href = '/product/product_list/' + item['product_id'] + '-1'
|
||||
obj.txt = item['product_name']
|
||||
searchData.push(obj)
|
||||
let obj = {};
|
||||
obj.href = "/project/" + item["product_id"] + "-1";
|
||||
obj.txt = item["product_name"];
|
||||
searchData.push(obj);
|
||||
}
|
||||
|
||||
showSearchHideBox(searchData)
|
||||
})
|
||||
showSearchHideBox(searchData);
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
let url = getHerf("/search/0-1?s=");
|
||||
|
||||
}, 1000)
|
||||
}
|
||||
let url = getHerf('/product/product_list/0-1?s=')
|
||||
|
||||
const keyDownEvent = $event => {
|
||||
$event.keyCode === 13 && (router.push(url + $event.target.value))
|
||||
const keyDownEvent = ($event) => {
|
||||
$event.keyCode === 13 && router.push(url + $event.target.value);
|
||||
// console.log(123);
|
||||
$event.keyCode === 13 && showSearchBox()
|
||||
$event.keyCode === 13 && showSearchBox();
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
||||
useFetch('/api/product/getProductTypeTree', { params: { locale: locale.value } }).then(res => {
|
||||
let data = JSON.parse(res.data.value).data || []
|
||||
res = []
|
||||
for (let item of data) {
|
||||
if (item.children == 0) {
|
||||
let obj = {}
|
||||
obj.name = item.product_type_name
|
||||
obj.href = '/product/product_list/' + item['product_type_id'] + '-1'
|
||||
obj.children = []
|
||||
res.push(obj)
|
||||
}
|
||||
else {
|
||||
let obj = {}
|
||||
obj.name = item.product_type_name
|
||||
obj.href = '/product/product_list/' + item['product_type_id'] + '-1'
|
||||
let childrens = [];
|
||||
for (let _item of item.children) {
|
||||
let child = {}
|
||||
child.name = _item.product_type_name
|
||||
child.href = '/product/product_list/' + _item['product_type_id'] + '-1'
|
||||
childrens.push(child)
|
||||
useFetch("/api/product/getProductTypeTree", { params: { locale: locale.value } }).then(
|
||||
(res) => {
|
||||
let data = JSON.parse(res.data.value).data || [];
|
||||
res = [];
|
||||
for (let item of data) {
|
||||
if (item.children == 0) {
|
||||
let obj = {};
|
||||
obj.name = item.product_type_name;
|
||||
obj.href = "/project/" + item["product_type_id"] + "-1";
|
||||
obj.children = [];
|
||||
res.push(obj);
|
||||
} else {
|
||||
let obj = {};
|
||||
obj.name = item.product_type_name;
|
||||
obj.href = "/project/" + item["product_type_id"] + "-1";
|
||||
let childrens = [];
|
||||
for (let _item of item.children) {
|
||||
let child = {};
|
||||
child.name = _item.product_type_name;
|
||||
child.href = "/project/" + _item["product_type_id"] + "-1";
|
||||
childrens.push(child);
|
||||
}
|
||||
obj.children = childrens;
|
||||
res.push(obj);
|
||||
}
|
||||
}
|
||||
/**新增全系列跳转**/
|
||||
res.unshift({
|
||||
href: "/project/0-1",
|
||||
name: t("home.products.all"),
|
||||
});
|
||||
for (let key in navList.value) {
|
||||
if (navList.value[key].alias === "project") {
|
||||
navList.value[key].children = res;
|
||||
}
|
||||
obj.children = childrens
|
||||
res.push(obj)
|
||||
}
|
||||
}
|
||||
console.log(res, "数据");
|
||||
/**新增全系列跳转**/
|
||||
res.unshift({
|
||||
href: '/product/product_list/0-1',
|
||||
name: t('home.products.all')
|
||||
})
|
||||
for (let key in navList.value) {
|
||||
if (navList.value[key].alias === 'products') {
|
||||
navList.value[key].children = res
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src="~/assets/css/Header/index.scss"></style>
|
||||
<style lang="scss" scoped src="~/assets/css/Header/media.scss"></style>
|
||||
<style lang="scss" scoped src="~/assets/css/Header/media.scss"></style>
|
||||
|
||||
@ -5,10 +5,15 @@
|
||||
// height: 50vh;
|
||||
// width: 50vw;
|
||||
.__magnify__img {
|
||||
border: 1px solid #999;
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.__magnify__zoom {
|
||||
background-color: yellow;
|
||||
|
||||
@ -5,16 +5,16 @@
|
||||
<div class="__magnify__img">
|
||||
<img :src="props.imgSrc" alt="">
|
||||
<!--颜色块-->
|
||||
<div class="__magnify__zoom"
|
||||
<!-- <div class="__magnify__zoom"
|
||||
:style="`height:${props.zoomRect.h}vh;
|
||||
width:${props.zoomRect.w}vh;
|
||||
display:{};
|
||||
`"
|
||||
></div>
|
||||
></div> -->
|
||||
</div>
|
||||
|
||||
<!--放大-->
|
||||
<div class="__magnify__img-big-box"
|
||||
<!-- <div class="__magnify__img-big-box"
|
||||
:style="`height:${props.imgBigRect.h}vh;
|
||||
width:${props.imgBigRect.w}vh;
|
||||
left:${props.imgBigRect.l}vh;
|
||||
@ -22,7 +22,7 @@
|
||||
`"
|
||||
>
|
||||
<img class="__magnify__img-big-img" :src="props.imgSrc" alt="">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@ -87,68 +87,68 @@ const props = defineProps({
|
||||
// 放大的比例
|
||||
const RATE = props.rate;
|
||||
|
||||
onMounted(() => {
|
||||
let oImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img")[0];
|
||||
let oZoom = <HTMLDivElement>document.getElementsByClassName("__magnify__zoom")[0];
|
||||
let oImgBig = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-box")[0];
|
||||
let oImgBigImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-img")[0];
|
||||
// onMounted(() => {
|
||||
// let oImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img")[0];
|
||||
// let oZoom = <HTMLDivElement>document.getElementsByClassName("__magnify__zoom")[0];
|
||||
// let oImgBig = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-box")[0];
|
||||
// let oImgBigImg = <HTMLDivElement>document.getElementsByClassName("__magnify__img-big-img")[0];
|
||||
|
||||
//init
|
||||
(() => {
|
||||
oZoom.style.backgroundColor = props.zoomColor
|
||||
})()
|
||||
// //init
|
||||
// (() => {
|
||||
// oZoom.style.backgroundColor = props.zoomColor
|
||||
// })()
|
||||
|
||||
oImg.onmouseover = function () {
|
||||
oZoom.style.display = "block";
|
||||
oImgBig.style.display = "block";
|
||||
}
|
||||
// oImg.onmouseover = function () {
|
||||
// oZoom.style.display = "block";
|
||||
// oImgBig.style.display = "block";
|
||||
// }
|
||||
|
||||
oImg.onmouseout = function () {
|
||||
oZoom.style.display = "none";
|
||||
oImgBig.style.display = "none";
|
||||
}
|
||||
let zoomX = 0,
|
||||
zoomY = 0
|
||||
oImg.onmousemove = function (e) {
|
||||
// oImg.onmouseout = function () {
|
||||
// oZoom.style.display = "none";
|
||||
// oImgBig.style.display = "none";
|
||||
// }
|
||||
// let zoomX = 0,
|
||||
// zoomY = 0
|
||||
// oImg.onmousemove = function (e) {
|
||||
|
||||
zoomX = e.clientX - oImg.getBoundingClientRect().left
|
||||
zoomY = e.clientY - oImg.getBoundingClientRect().top;
|
||||
// zoomX = e.clientX - oImg.getBoundingClientRect().left
|
||||
// zoomY = e.clientY - oImg.getBoundingClientRect().top;
|
||||
|
||||
if (zoomX < 0) {
|
||||
zoomX = 0
|
||||
}
|
||||
if (zoomX + oZoom.offsetWidth >
|
||||
oImg.getBoundingClientRect().left +
|
||||
oZoom.offsetWidth
|
||||
) {
|
||||
zoomX = oImg.getBoundingClientRect().left
|
||||
}
|
||||
if (zoomY < 0) {
|
||||
zoomY = 0
|
||||
}
|
||||
if (e.clientY >
|
||||
oImg.getBoundingClientRect().top +
|
||||
oImg.getBoundingClientRect().height
|
||||
-
|
||||
oZoom.offsetWidth
|
||||
) {
|
||||
zoomY =
|
||||
oImg.getBoundingClientRect().height
|
||||
-
|
||||
oZoom.offsetWidth
|
||||
// if (zoomX < 0) {
|
||||
// zoomX = 0
|
||||
// }
|
||||
// if (zoomX + oZoom.offsetWidth >
|
||||
// oImg.getBoundingClientRect().left +
|
||||
// oZoom.offsetWidth
|
||||
// ) {
|
||||
// zoomX = oImg.getBoundingClientRect().left
|
||||
// }
|
||||
// if (zoomY < 0) {
|
||||
// zoomY = 0
|
||||
// }
|
||||
// if (e.clientY >
|
||||
// oImg.getBoundingClientRect().top +
|
||||
// oImg.getBoundingClientRect().height
|
||||
// -
|
||||
// oZoom.offsetWidth
|
||||
// ) {
|
||||
// zoomY =
|
||||
// oImg.getBoundingClientRect().height
|
||||
// -
|
||||
// oZoom.offsetWidth
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
oZoom.style.left = zoomX + "px";
|
||||
oZoom.style.top = zoomY + 'px';
|
||||
// oZoom.style.left = zoomX + "px";
|
||||
// oZoom.style.top = zoomY + 'px';
|
||||
|
||||
oImgBigImg.style.left = (props.imgBigRect.lc || 75) + -zoomX * (props.imgBigRect.speed || 2)+ "px";
|
||||
oImgBigImg.style.top = -zoomY * (props.imgBigRect.speed || 2)+ "px";
|
||||
oImgBigImg.style.height = props.rate + "%";
|
||||
oImgBigImg.style.width = props.rate + "%";
|
||||
// oImgBigImg.style.left = (props.imgBigRect.lc || 75) + -zoomX * (props.imgBigRect.speed || 2)+ "px";
|
||||
// oImgBigImg.style.top = -zoomY * (props.imgBigRect.speed || 2)+ "px";
|
||||
// oImgBigImg.style.height = props.rate + "%";
|
||||
// oImgBigImg.style.width = props.rate + "%";
|
||||
|
||||
}
|
||||
})
|
||||
// }
|
||||
// })
|
||||
</script>
|
||||
|
||||
<style scoped src="./index.scss"></style>
|
||||
|
||||
@ -36,7 +36,6 @@ let posterStyle = {
|
||||
useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => {
|
||||
const data = JSON.parse(res.data.value).data
|
||||
posterInfo.value = data
|
||||
console.log(data,'啊实打实大苏打')
|
||||
setTimeout(() => {
|
||||
htmlAddAnimations()
|
||||
});
|
||||
|
||||
247
components/UploadImage/index.vue
Normal file
247
components/UploadImage/index.vue
Normal file
@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload multiple :action="imageUpload" list-type="picture-card" :on-success="handleUploadSuccess"
|
||||
:before-upload="handleBeforeUpload" :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed"
|
||||
name="file" :drag="true" :data="data" :disabled="isDisabled" :on-remove="handleRemove"
|
||||
:show-file-list="true" :headers="headers" :file-list="fileList" :on-preview="handlePictureCardPreview"
|
||||
:style="style" :class="{ hide: fileList.length >= limit || isDisabled }">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
+
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<!-- 上传提示 -->
|
||||
<div class="el-upload__tip" v-if="showTip">
|
||||
请上传
|
||||
<template v-if="fileSize">
|
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||
</template>
|
||||
<template v-if="fileType">
|
||||
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
|
||||
</template>
|
||||
的文件
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
|
||||
<template v-if="isImage(dialogImageUrl)">
|
||||
<img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
|
||||
</template>
|
||||
<template v-else-if="isVideo(dialogImageUrl)">
|
||||
<video :src="dialogImageUrl" controls autoplay
|
||||
style="display: block; max-width: 100%; height: 500px; margin: 0 auto"></video>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed } from "vue";
|
||||
// import { useLoginStore } from "~/store";
|
||||
// import { imageUpload } from "~/service/common";
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: [String, Object, Array],
|
||||
// 图片数量限制
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 大小限制(MB)
|
||||
fileSize: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: {
|
||||
type: Array,
|
||||
default: () => ['png', 'jpg', 'jpeg'],
|
||||
},
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 是否禁用
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 上传携带的参数
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
})
|
||||
|
||||
// const store = useLoginStore();
|
||||
const headers = {
|
||||
Accept: "application/json",
|
||||
// ...store.headers,
|
||||
};
|
||||
|
||||
const emit = defineEmits()
|
||||
const number = ref(0)
|
||||
const uploadList = ref([])
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
const fileList = ref([])
|
||||
const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize))
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
const list = Array.isArray(val) ? val : props.modelValue.split(',')
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map((item) => {
|
||||
if (typeof item === 'string') {
|
||||
// if (item.indexOf(baseUrl) === -1) {
|
||||
// item = { name: baseUrl + item, url: baseUrl + item }
|
||||
// } else {
|
||||
item = { name: item, url: item }
|
||||
// }
|
||||
}
|
||||
return item
|
||||
})
|
||||
} else {
|
||||
fileList.value = []
|
||||
return []
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
)
|
||||
|
||||
// 删除图片
|
||||
function handleRemove(file, files) {
|
||||
emit('update:modelValue', listToString(fileList.value))
|
||||
}
|
||||
|
||||
const imageUpload = function(){
|
||||
|
||||
}
|
||||
|
||||
// 上传成功回调
|
||||
function handleUploadSuccess(res) {
|
||||
if (res.code != 0) {
|
||||
ElMessage.error(`上传失败，原因:${res.msg}!`);
|
||||
fileList.value = fileList.value.slice(0, fileList.value.length - 1)
|
||||
return
|
||||
}
|
||||
uploadList.value.push({ name: res.data.fileName, url: res.data.url })
|
||||
if (uploadList.value.length === number.value) {
|
||||
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value)
|
||||
uploadList.value = []
|
||||
number.value = 0
|
||||
emit('update:modelValue', listToString(fileList.value))
|
||||
}
|
||||
updateVideoDom()
|
||||
|
||||
}
|
||||
|
||||
function updateVideoDom() {
|
||||
setTimeout(() => {
|
||||
Array.prototype.slice.call(document.getElementsByClassName('is-success'))
|
||||
.filter(item => item.className.indexOf('el-upload-list__item') !== -1)
|
||||
.map(item => {
|
||||
let tag = item.getElementsByClassName('el-upload-list__item-thumbnail')[0];
|
||||
if (isVideo(tag.getAttribute('src'))) {
|
||||
let attr = [tag.getAttribute('class'), tag.getAttribute('src')];
|
||||
let videoTag = document.createElement('video');
|
||||
videoTag.setAttribute('class', attr[0]);
|
||||
videoTag.setAttribute('src', attr[1]);
|
||||
item.replaceChild(videoTag, tag);
|
||||
}
|
||||
});
|
||||
},)
|
||||
}
|
||||
|
||||
// 上传前loading加载
|
||||
function handleBeforeUpload(file) {
|
||||
let isImg = false
|
||||
if (props.fileType.length) {
|
||||
let fileExtension = ''
|
||||
if (file.name.lastIndexOf('.') > -1) {
|
||||
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1)
|
||||
}
|
||||
isImg = props.fileType.some((type) => {
|
||||
if (file.type.indexOf(type) > -1) return true
|
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true
|
||||
return false
|
||||
})
|
||||
} else {
|
||||
isImg = file.type.indexOf('image') > -1
|
||||
}
|
||||
if (!isImg) {
|
||||
ElMessage.error(`文件格式不正确, 请上传${props.fileType.join('/')}图片格式文件!`);
|
||||
return false
|
||||
}
|
||||
if (props.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSize
|
||||
if (!isLt) {
|
||||
ElMessage.error(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
|
||||
return false
|
||||
}
|
||||
}
|
||||
number.value++
|
||||
}
|
||||
|
||||
// 文件个数超出
|
||||
function handleExceed() {
|
||||
ElMessage.error(`上传文件数量不能超过 ${props.limit} 个!`)
|
||||
}
|
||||
|
||||
// 上传失败
|
||||
function handleUploadError() {
|
||||
ElMessage.error('上传图片失败')
|
||||
}
|
||||
|
||||
// 预览
|
||||
function handlePictureCardPreview(file) {
|
||||
dialogImageUrl.value = file.url
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 对象转成指定字符串分隔
|
||||
function listToString(list, separator) {
|
||||
let strs = ''
|
||||
separator = separator || ','
|
||||
for (let i in list) {
|
||||
if (undefined !== list[i].url && list[i].url.indexOf('blob:') !== 0) {
|
||||
strs += list[i].url + separator
|
||||
}
|
||||
}
|
||||
return strs != '' ? strs.substr(0, strs.length - 1) : ''
|
||||
}
|
||||
|
||||
const getFileExtension = (filename) => {
|
||||
return filename.slice(filename.lastIndexOf('.'));
|
||||
};
|
||||
|
||||
const isImage = (value) => {
|
||||
const imageExtensions = ['.png', '.jpg', '.jpeg'];
|
||||
const extension = getFileExtension(value);
|
||||
return imageExtensions.includes(extension.toLowerCase());
|
||||
};
|
||||
|
||||
const isVideo = (value) => {
|
||||
const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.mkv', '.mpeg', '.3gp', '.webm', '.vob', '.rm', '.rmvb'];
|
||||
const extension = getFileExtension(value);
|
||||
return videoExtensions.includes(extension.toLowerCase());
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.hide .el-upload--picture-card) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.el-upload-dragger) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
366
pages/animation/[idx]-[page].vue
Normal file
366
pages/animation/[idx]-[page].vue
Normal file
@ -0,0 +1,366 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<Poster :type=2></Poster>
|
||||
|
||||
<div class="background_box">
|
||||
|
||||
<main class="container font-size-box">
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-big-box">
|
||||
<div class="search-box">
|
||||
<!-- <el-select class="search-select" v-model="queryParams.categoryId" placeholder="请选择"
|
||||
style="width: 90px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
<div class="searchBox">
|
||||
|
||||
<input v-model="queryParams.search" class="searchInput" type="text" name=""
|
||||
placeholder="开启精彩搜索" @keydown="keyDownEvent">
|
||||
<button class="searchButton" href="#" @click="handleSearch">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"
|
||||
fill="none">
|
||||
<g clip-path="url(#clip0_2_17)">
|
||||
<g filter="url(#filter0_d_2_17)">
|
||||
<path
|
||||
d="M23.7953 23.9182L19.0585 19.1814M19.0585 19.1814C19.8188 18.4211 20.4219 17.5185 20.8333 16.5251C21.2448 15.5318 21.4566 14.4671 21.4566 13.3919C21.4566 12.3167 21.2448 11.252 20.8333 10.2587C20.4219 9.2653 19.8188 8.36271 19.0585 7.60242C18.2982 6.84214 17.3956 6.23905 16.4022 5.82759C15.4089 5.41612 14.3442 5.20435 13.269 5.20435C12.1938 5.20435 11.1291 5.41612 10.1358 5.82759C9.1424 6.23905 8.23981 6.84214 7.47953 7.60242C5.94407 9.13789 5.08145 11.2204 5.08145 13.3919C5.08145 15.5634 5.94407 17.6459 7.47953 19.1814C9.01499 20.7168 11.0975 21.5794 13.269 21.5794C15.4405 21.5794 17.523 20.7168 19.0585 19.1814Z"
|
||||
stroke="white" stroke-width="3" stroke-linecap="round"
|
||||
stroke-linejoin="round" shape-rendering="crispEdges"></path>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2_17" x="-0.418549" y="3.70435" width="29.7139"
|
||||
height="29.7139" filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha">
|
||||
</feColorMatrix>
|
||||
<feOffset dy="4"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
|
||||
<feComposite in2="hardAlpha" operator="out"></feComposite>
|
||||
<feColorMatrix type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_2_17"></feBlend>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_17"
|
||||
result="shape"></feBlend>
|
||||
</filter>
|
||||
<clipPath id="clip0_2_17">
|
||||
<rect width="28.0702" height="28.0702" fill="white"
|
||||
transform="translate(0.403503 0.526367)"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类 -->
|
||||
<div class="category-big-box">
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">分类</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
||||
@click="toggleActive(index)" v-for="(item, index) in typeList">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-box" v-if="typeChildrenList.length !== 0">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">二级分类</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
||||
@click="toggleChildActive(index)" v-for="(item, index) in typeChildrenList">{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-line"></div>
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">排序</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item sort" @click="handleSort(1)">
|
||||
<span>最新</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(2)">
|
||||
<span>推荐</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(3)">
|
||||
<span>下载</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(4)">
|
||||
<span>浏览</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 模块渲染列表 -->
|
||||
<div v-if="dataList.length != 0" class="content-big-box animate__animated animate__fadeIn">
|
||||
<div class="row content-list-box">
|
||||
|
||||
<nuxt-link v-for="(item, index) in dataList" :to="getHerf(getLink(item))"
|
||||
class="col-lg-3 col-md-6 col-sm-6 col-xs-6 jump">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_none" v-else>
|
||||
</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>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 预对接
|
||||
let dataList = ref([
|
||||
{
|
||||
id: 1,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
])
|
||||
let typeList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "全部",
|
||||
isActive: true
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "三渲二",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "交通工具",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "武器兵刃",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
])
|
||||
let typeChildrenList = ref([
|
||||
])
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
let active = reactive({ idx: Number(route.params.idx), name: typeList.value[0] })
|
||||
|
||||
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,
|
||||
locale: locale.value,
|
||||
limit: 10,
|
||||
search: ""
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
const routerJump = function () {
|
||||
let { page } = queryParams
|
||||
router.push("1-" + String(page))
|
||||
}
|
||||
|
||||
const getLink = function (item) {
|
||||
if (item?.link) {
|
||||
return item?.link;
|
||||
} else {
|
||||
return "/model/details/" + item.id;
|
||||
}
|
||||
}
|
||||
|
||||
let url = getHerf('/search/0-1?s=')
|
||||
const handleSearch = function(){
|
||||
router.push(url + queryParams.search)
|
||||
}
|
||||
|
||||
const keyDownEvent = $event => {
|
||||
$event.keyCode === 13 && (router.push(url + queryParams.search))
|
||||
}
|
||||
|
||||
// 切换激活状态的方法
|
||||
const toggleActive = (index) => {
|
||||
typeList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
// 切换子类激活状态的方法
|
||||
const toggleChildActive = (index) => {
|
||||
typeChildrenList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeChildrenList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
const handleSort = (type) => {
|
||||
console.log(type);
|
||||
}
|
||||
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
|
||||
// 获取新闻类型列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
||||
// total.value = JSON.parse(res.data.value).count || 0
|
||||
// res.unshift({
|
||||
// href: '/project/project/0-1',
|
||||
// name: t('home.products.all')
|
||||
// })
|
||||
// newsList.value = JSON.parse(res.data.value).data || []
|
||||
// })
|
||||
|
||||
|
||||
// 获取新闻列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).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 } })
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 2,
|
||||
})
|
||||
htmlAddAnimations()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/list/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/media.scss"></style>
|
||||
396
pages/animation/details/[id].vue
Normal file
396
pages/animation/details/[id].vue
Normal file
@ -0,0 +1,396 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ dataDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<div class="container details-pos-box">
|
||||
|
||||
<div class="details-big-box row">
|
||||
|
||||
<!-- 左边 -->
|
||||
<div class="details-left-box col-lg-8 col-md-6 col-sm-12">
|
||||
<div class="preview-box">
|
||||
<Magnify :imgSrc='checkimg' :imgBigSrc='checkimg' :imgBigRect='imgBigRect' rate="200">
|
||||
</Magnify>
|
||||
<div class="exzoom">
|
||||
<div class="exzoom_nav">
|
||||
<p class="exzoom_nav_inner">
|
||||
<span v-for="(item, i) in detail_list_img" :key="i" @mouseenter="changetype">
|
||||
<span :class="count - 1 == i ? 'exzoom_span current' : 'exzoom_span'">
|
||||
<img :src="item" width="60">
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="exzoom_btn">
|
||||
<a href="javascript:void(0);" class="exzoom_prev_btn" @click="exzoo_click(0)">
|
||||
<el-icon>
|
||||
<Back />
|
||||
</el-icon>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="exzoom_next_btn" @click="exzoo_click(1)">
|
||||
<el-icon>
|
||||
<Right />
|
||||
</el-icon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div clas="left-detail-pos-box">
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">简介</div>
|
||||
<div class="left-detail-content">{{ dataDetail.intro }}</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">描述</div>
|
||||
<div class="left-detail-content" v-html="dataDetail.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边边 -->
|
||||
<div class="details-right-box col-lg-4 col-md-6 col-sm-12">
|
||||
<h1 class="details-title">Horse Animset Pro (Riding System)</h1>
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-content-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<div class="content-category">{{ dataDetail.categoty_name }}</div>
|
||||
</div>
|
||||
<div class="content-rate-line">|</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<StarFilled />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">({{ dataDetail.collect_num }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-price">{{ dataDetail.price ? 0 : "免费" }}</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="content-rate-icon-box detail-icon-box">
|
||||
<el-icon class="content-rate-icon detail-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num detail-rate-text">{{ dataDetail.view_num }} 浏览量</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="play-btn-box">
|
||||
<button class="play-btn">
|
||||
<div class="btn-text">P L A Y</div>
|
||||
<div id="clip">
|
||||
<div id="leftTop" class="corner"></div>
|
||||
<div id="rightBottom" class="corner"></div>
|
||||
<div id="rightTop" class="corner"></div>
|
||||
<div id="leftBottom" class="corner"></div>
|
||||
</div>
|
||||
<span id="rightArrow" class="arrow"></span>
|
||||
<span id="leftArrow" class="arrow"></span>
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn" @click="redirectToAnotherProject(dataDetail.download_link)">下载工程</button>
|
||||
<div class="btn-collect">
|
||||
<img @click="handleCollect" :src=collectImg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child"
|
||||
@click="redirectToAnotherProject(dataDetail.material_link)">下载资源</button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child" @click="redirectToAnotherProject(dataDetail.note_link)">查看笔记</button>
|
||||
</div>
|
||||
|
||||
<div class="right-detail-intro-pos-box">
|
||||
<div class="content-line"></div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">文件大小</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.flie_size }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">发布日期</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.send_time }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">Unity 版本</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.unity_version }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">URP 支持</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.is_urp ? '支持' : '不支持' }}</div>
|
||||
</div>
|
||||
<div class="Instructions">仅供交流学习研究使用，版权归原作者所有，禁止商业使用。【如有侵权请联系删除】</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="content-line"></div> -->
|
||||
|
||||
<!-- 评论 -->
|
||||
<div class="right-comment-pos-box">
|
||||
<div class="left-detail-title">评论</div>
|
||||
|
||||
<div class="right-comment-input-box">
|
||||
<div class="content-comment-user-img-box">
|
||||
<el-avatar class="content-comment-user-img" :size="50" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="comment-input-box">
|
||||
<el-input v-model="commentContent" :rows="3" type="textarea" placeholder="欢迎您留下宝贵的见解！" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-btn">
|
||||
<el-button type="primary" @click="handleSendComment">发送评论</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-for="item in dataDetail.comment_list">
|
||||
<div class="custom-comment-big-box">
|
||||
<div class="custom-comment-avatar">
|
||||
<el-avatar class="content-comment-user-img" :size="45" :src=item.user_img />
|
||||
</div>
|
||||
<div class="custom-comment-content-box">
|
||||
<div class="custom-comment-content-user-name">{{ item.user_name }}</div>
|
||||
<div class="custom-comment-content-text">{{ item.comment_content }}</div>
|
||||
<div class="custom-comment-content-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="details-pos-box">
|
||||
<div class="details-title-box">
|
||||
<div class="details-title"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<Final></Final>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { View } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 预对接
|
||||
let dataDetail = ref({
|
||||
id: 1,
|
||||
title: "Horse Animset Pro (Riding System)",
|
||||
user_id: 1,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
collect_num: 3086,
|
||||
view_num: 506,
|
||||
categoty_name: "模型 > 动物",
|
||||
price: 0,
|
||||
download_link: "https://drive.aerwen.net/d/aerwen/unity%E6%BA%90%E7%A0%81/Class/%E9%A1%BA%E8%81%8C%E5%AD%A6%E4%B9%A0%E9%80%9A%E8%AF%BE%E7%A8%8B/%E7%BB%93%E8%AF%BE/9%E4%BB%BB%E5%8A%A1%EF%BC%9A%E5%88%86%E6%95%B0%E7%BB%9F%E8%AE%A1.unitypackage",
|
||||
material_link: "",
|
||||
note_link: "https://blog.csdn.net/weixin_60435181/article/details/139512841?spm=1001.2014.3001.5501",
|
||||
is_collect: false,
|
||||
is_urp: false,
|
||||
flie_size: "8.2MB",
|
||||
send_time: "2024-03-01",
|
||||
unity_version: "2019.4.23或更高",
|
||||
comment_list: [
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://thirdqq.qlogo.cn/ek_qqapp/AQIMauLMSKSQoxA7pKYDZXYRTtVrZrOjiarOroKgySzPZibMamTMEfys5XN3vCQwRQzCajRylXORhbmTSDZCTIV0djV5ybY2dOF0cqxYQzgicmQ7pXFLXs/100",
|
||||
user_name: "hqbb",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "大佬牛逼！",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "123",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "测试",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
intro: "Riding System using the Animal Controller to make your character Ride any creature",
|
||||
content: "<p><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>✅✅升级至 4.2+ ✅✅<br></strong></span></p><p style=\"text-align: start;\">已移除大量脚本，所以为了顺利升级，请遵循以下步骤：</p><p style=\"text-align: start;\">1- 移除 [Malbers Animation\\Common] 文件夹</p><p style=\"text-align: start;\">2- 将 [Horse Animset Pro 4.2+] 再次导入项目<br><a href=\"https://malbersanimations.gitbook.io/animal-controller/quickstart/upgrading-to-ac-1.2-hap-4.2\" target=\"_blank\" style=\"text-align: start;\">升级过程中的常见问题 (AC)</a><br><br><br></p><p style=\"text-align: start;\">这就是你的终极骑行系统！<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>高质量的动画<br></strong></span></p><p style=\"text-align: start;\">Horse AnimSet Pro(HAP) 是一套动画框架和骑行系统控制器，基于根运动，适合于任何人形角色。该资源开始时就像是一个简单的马模型和动画包，但经过不断发展，它已经成为一套强大而灵活的骑行控制器。它包括一个来自于标准资源的基础角色控制器，但可以与你创建的更高级的角色控制器搭配使用，也可以与商店中任何让人惊叹的角色控制器（TCP 或 FPC）搭配使用。</p><p style=\"text-align: start;\">该资源包在不断扩展，每次更新都推出了更多功能和动画效果！<br></p><p style=\"text-align: start;\"><a href=\"http://bit.ly/HAPIntegrations\" target=\"_blank\">集成</a> | <a href=\"http://bit.ly/2DuntpT\" target=\"_blank\">骑上任何生物</a> | <a href=\"http://bit.ly/HorseWebGL\" target=\"_blank\">网络演示</a> | <a href=\"http://goo.gl/BLTI4t\" target=\"_blank\">论坛</a> | <a href=\"http://bit.ly/MalbersHAPDoc\" target=\"_blank\">手册<br><br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>⚙ 功能 ⚙<br></strong></span></a></p><p style=\"text-align: start;\">马：</p><p style=\"text-align: start;\">- 80 个动画剪辑</p><p style=\"text-align: start;\">- 2 种马的风格（现实、多边形艺术）</p><p style=\"text-align: start;\">- 针对每种马的风格提供多种纹理集合</p><p style=\"text-align: start;\">- LOD</p><p style=\"text-align: start;\">- 盔甲、缰绳和马鞍</p><p style=\"text-align: start;\">- 针对缰绳和马鬃的 Unity 布料模拟不能用于 Unity 2019</p><p style=\"text-align: start;\">- 声音</p><p style=\"text-align: start;\">- 基础脚步系统（足迹声音和足迹粒子）</p><p style=\"text-align: start;\">- 用于管理所有 Malbers Animations 生物的动物控制器</p><p style=\"text-align: start;\">- 状态：游泳、摔倒、跳跃、攻击、死亡、行走、小跑、慢跑、疾驰、冲刺</p><p style=\"text-align: start;\">- 定向伤害系统</p><p style=\"text-align: start;\">- 扫射</p><p style=\"text-align: start;\">- 镜头基础输入</p><p style=\"text-align: start;\">- 地形校正</p><p style=\"text-align: start;\">- 支持 NavMesh Agent。基础 AI</p><p style=\"text-align: start;\">- 移动端友好</p><p style=\"text-align: start;\">骑行者：</p><p style=\"text-align: start;\">- 132 个动画剪辑（可用于人形角色设定，以获得更好的兼容性）</p><p style=\"text-align: start;\">- 附带 1 个纹理集合的牛仔模型</p><p style=\"text-align: start;\">- 骑行者系统（TCP 和 FPC）</p><p style=\"text-align: start;\">- 骑行者战斗系统：弓箭、手枪、混战（即将推出长矛、步枪、魔法物品、投掷物）</p><p style=\"text-align: start;\">- 非常非常基础的库存系统，用以演示骑行者 - 战斗系统与外部库存的兼容性。</p><p style=\"text-align: start;\">实用工具：</p><p style=\"text-align: start;\">- 材料更换器</p><p style=\"text-align: start;\">- 混合形状管理器</p><p style=\"text-align: start;\">- 网格更换器</p><p style=\"text-align: start;\">- 动画器消息行为</p><p style=\"text-align: start;\">- 动画器声音行为</p><p style=\"text-align: start;\">- 头部瞄准</p><p style=\"text-align: start;\">- 武器（模型、纹理和脚本）</p><p style=\"text-align: start;\">- 动物基础 AI</p><p style=\"text-align: start;\">- 带镜头状态的基础镜头设置系统。</p><p style=\"text-align: start;\">- 兼容所有 Malbers 动物<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><em>- 兼容 Invector TCP、Ootii MC，即将推出更多集成！未来更新<br></em></span></p><p style=\"text-align: start;\">联系人：<a href=\"mailto:malbers.shark87@gmail.com\" target=\"_blank\">malbers.shark87@gmail.com</a></p><p style=\"text-align: start;\">查看日志以了解版本变化</p><p style=\"text-align: start;\"><br></p><p style=\"text-align: start;\"><br></p>"
|
||||
})
|
||||
let detail_list_img = ref([
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/0f73facc-8e8c-4b94-8de3-67ca8386f5ac.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/1cc96654-37ad-4b7f-ae1b-0dead9d9fd76.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
])
|
||||
|
||||
// 参数
|
||||
const { l, locale } = useI18n();
|
||||
const route = useRoute()
|
||||
const checkimg = ref('https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp')
|
||||
const imgBigRect = ref({ h: 50, w: 50, l: 51, t: 0 })
|
||||
const count = ref(1)
|
||||
const collectImg = ref("/img/details/heart_null.png")
|
||||
const commentContent = ref("")
|
||||
|
||||
// 方法
|
||||
const changetype = function () {
|
||||
let element = document.getElementsByClassName('exzoom_span')
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
element[i].addEventListener('mouseenter', function () {
|
||||
for (let s = 0; s < element.length; s++) {
|
||||
element[s].classList.remove('current')
|
||||
|
||||
}
|
||||
element[i].classList.add('current')
|
||||
count.value = i + 1;
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
});
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
const exzoo_click = function (val) {
|
||||
|
||||
if (val == 1) {
|
||||
|
||||
if (count.value == detail_list_img.value.length) {
|
||||
count.value = 1
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
// console.log(checkimg.value);
|
||||
count.value++
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
} else {
|
||||
|
||||
if (count.value <= 1) {
|
||||
count.value = detail_list_img.value.length
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
count.value--
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
|
||||
// 点击收藏
|
||||
const handleCollect = function () {
|
||||
if (dataDetail.value.is_collect == false) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
dataDetail.value.is_collect = true
|
||||
ElMessage({
|
||||
message: '收藏成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
dataDetail.value.is_collect = false
|
||||
ElMessage({
|
||||
message: '取消收藏',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化收藏状态
|
||||
const setCollect = function () {
|
||||
if (dataDetail.value.is_collect == true) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
}
|
||||
}
|
||||
|
||||
// 访问其他网站
|
||||
const redirectToAnotherProject = function (url) {
|
||||
const returnUrl = window.location.href;
|
||||
// window.open = url + '?returnUrl=' + encodeURIComponent(returnUrl);//本页面打开
|
||||
window.open(url);//新标签打开
|
||||
}
|
||||
|
||||
// 发送评论
|
||||
const handleSendComment = function () {
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
|
||||
setCollect()
|
||||
})
|
||||
|
||||
|
||||
|
||||
// --- 接口对接 ---
|
||||
// 获取新闻详情
|
||||
// useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
|
||||
// dataDetail.value = JSON.parse(res.data.value).data
|
||||
// })
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).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/list/list_details/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/list_details/media.scss"></style>
|
||||
368
pages/center.vue
Normal file
368
pages/center.vue
Normal file
@ -0,0 +1,368 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
<Meta name="baidu-site-verification" content="" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<!-- <Poster :type=1 :title="$t('common.poster.contact')"></Poster> -->
|
||||
|
||||
<div class="Center-main">
|
||||
<div class="container">
|
||||
<section>
|
||||
|
||||
<div class="row center-top-pos-box">
|
||||
<div class="col-lg-12">
|
||||
|
||||
|
||||
<div class="center-top-box animate__animated animate__fadeIn" >
|
||||
<div class="center-top-cover-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/3454600313/O1CN01DJrwEp1EBOjzwBZdI_!!3454600313.jpg"
|
||||
alt="">
|
||||
</div>
|
||||
|
||||
<div class="center-user-box">
|
||||
<div class="center-user-content-box">
|
||||
<div class="center-user-img-box">
|
||||
<img :src=dataDetail.user_img alt="头像">
|
||||
</div>
|
||||
<div class="center-user-content-in-box">
|
||||
<div class="center-user-content-name">{{ dataDetail.user_name }}</div>
|
||||
<div class="center-user-content-intro">{{ dataDetail.user_intro }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-user-btn-box">
|
||||
<el-button type="primary" @click="handleClickEdit">
|
||||
<el-icon>
|
||||
<Edit />
|
||||
</el-icon>
|
||||
编辑信息</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="center-content-box animate__animated animate__fadeInUp">
|
||||
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane :label=tabMyWorksName name="first">
|
||||
|
||||
<el-empty v-if="myWorksList.length == 0" :image-size="200" />
|
||||
<div v-else class="row content-list-box">
|
||||
<div v-for="item in myWorksList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.works_cover alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.works_title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.works_view_num }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.works_comment_num }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.works_download_num }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-tag type="primary" style="margin-top:8px">{{ item.works_category_name }}</el-tag>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label=tabMyCollectName name="second">
|
||||
<el-empty v-if="myCollectList.length == 0" :image-size="200" />
|
||||
<div v-else class="row content-list-box">
|
||||
<div v-for="item in myCollectList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.works_cover alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.works_title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.works_view_num }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.works_comment_num }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.works_download_num }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-tag type="primary" style="margin-top:8px">{{ item.works_category_name }}</el-tag>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="编辑信息" width="900px" @closed="closeDialog" @open="openDialog">
|
||||
<el-form ref="formRef" :model="formData" :rules="rules">
|
||||
<el-row>
|
||||
|
||||
<el-col :span='24'>
|
||||
<el-form-item :label-width='labelWidth' label='图片' prop='poster_img'>
|
||||
<UploadImage ref='uploadRef' v-model='formData.poster_img' :data=uoloadData :limit='1' :fileSize='20'
|
||||
:drag='true' :isShowTip='true' />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="标题" prop="poster_title">
|
||||
<el-input v-model='formData.poster_title' type="text" placeholder='请输入标题'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="描述" prop="poster_describe">
|
||||
<el-input v-model='formData.poster_describe' type="text" placeholder='请输入描述'></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label-width="labelWidth" label="排序" prop="poster_sort">
|
||||
<el-input-number v-model='formData.poster_sort' controls-position='right' :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="handleEditClick(formRef)">编辑</el-button>
|
||||
<el-button @click="handleResetClick(formRef)">重置</el-button>
|
||||
<el-button @click="closeDialog()">取消</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
|
||||
let dataDetail = ref({
|
||||
user_id: 1,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
user_intro: "这家伙很懒，什么都没有写...",
|
||||
})
|
||||
|
||||
let myWorksList = ref(
|
||||
[
|
||||
{
|
||||
works_cover: "https://i.blender.kim/wp-content/uploads/2024/03/20240329171015632-1200x652.jpg",
|
||||
works_title: "小米SU7 模型",
|
||||
works_category_name: "模型",
|
||||
works_view_num: "737",
|
||||
works_comment_num: "100",
|
||||
works_download_num: "88",
|
||||
},
|
||||
{
|
||||
works_cover: "https://i.blender.kim/wp-content/uploads/2024/03/20240329171015632-1200x652.jpg",
|
||||
works_title: "小米SU7 模型",
|
||||
works_category_name: "模型",
|
||||
works_view_num: "737",
|
||||
works_comment_num: "100",
|
||||
works_download_num: "88",
|
||||
},
|
||||
{
|
||||
works_cover: "https://i.blender.kim/wp-content/uploads/2024/03/20240329171015632-1200x652.jpg",
|
||||
works_title: "小米SU7 模型",
|
||||
works_category_name: "模型",
|
||||
works_view_num: "737",
|
||||
works_comment_num: "100",
|
||||
works_download_num: "88",
|
||||
},
|
||||
{
|
||||
works_cover: "https://i.blender.kim/wp-content/uploads/2024/03/20240329171015632-1200x652.jpg",
|
||||
works_title: "小米SU7 模型",
|
||||
works_category_name: "模型",
|
||||
works_view_num: "737",
|
||||
works_comment_num: "100",
|
||||
works_download_num: "88",
|
||||
},
|
||||
{
|
||||
works_cover: "https://i.blender.kim/wp-content/uploads/2024/03/20240329171015632-1200x652.jpg",
|
||||
works_title: "小米SU7 模型",
|
||||
works_category_name: "模型",
|
||||
works_view_num: "737",
|
||||
works_comment_num: "100",
|
||||
works_download_num: "88",
|
||||
},
|
||||
]
|
||||
)
|
||||
|
||||
let myCollectList = ref(
|
||||
[
|
||||
{
|
||||
works_cover: "https://i.blender.kim/wp-content/uploads/2024/03/20240329171015632-1200x652.jpg",
|
||||
works_title: "小米SU7 模型",
|
||||
works_category_name: "模型",
|
||||
works_view_num: "737",
|
||||
works_comment_num: "100",
|
||||
works_download_num: "88",
|
||||
},
|
||||
{
|
||||
works_cover: "https://i.blender.kim/wp-content/uploads/2024/03/20240329171015632-1200x652.jpg",
|
||||
works_title: "小米SU7 模型",
|
||||
works_category_name: "模型",
|
||||
works_view_num: "737",
|
||||
works_comment_num: "100",
|
||||
works_download_num: "88",
|
||||
},
|
||||
]
|
||||
)
|
||||
|
||||
/** 基础变量 **/
|
||||
const { t, locale } = useI18n()
|
||||
const errorMsg = ref("");
|
||||
const tabMyWorksName = ref("作品 0")
|
||||
const tabMyCollectName = ref("收藏 0")
|
||||
const dialogVisible = ref(false)
|
||||
const formRef = ref();
|
||||
const labelWidth = 100;
|
||||
const formData = ref({});
|
||||
const uoloadData = ref({
|
||||
dirName: "Poster"
|
||||
})
|
||||
const rules = reactive({
|
||||
poster_img: [
|
||||
{
|
||||
required: true,
|
||||
message: '图片不能为空'
|
||||
}
|
||||
],
|
||||
poster_sort: [
|
||||
{
|
||||
required: true,
|
||||
message: '排序不能为空'
|
||||
}
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
|
||||
/** 业务方法 */
|
||||
const activeName = ref('first')
|
||||
|
||||
|
||||
const handleClick = (tab) => {
|
||||
console.log(tab)
|
||||
}
|
||||
|
||||
const handleClickEdit = (tab) => {
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 打开弹窗时执行
|
||||
const openDialog = () => {
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
handleResetClick(formRef.value);
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const handleEditClick = async (formEl) => {
|
||||
console.log(formData.value);
|
||||
if (!formEl) return;
|
||||
formEl.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
// const { code } = await editPoster(formData.value);
|
||||
// if (code == 0) {
|
||||
// closeDialog();
|
||||
// props.done();
|
||||
// }
|
||||
});
|
||||
};
|
||||
|
||||
const handleResetClick = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
|
||||
|
||||
|
||||
/** 接口对接 **/
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 5, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
// 获取联系我们内容
|
||||
let contactUsData = ref({})
|
||||
useFetch('/api/contactUs/getContactUs').then(res => {
|
||||
contactUsData.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
htmlAddAnimations({
|
||||
tagDom: 'Center-main', preload: 1, isRe: true
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
/**export**/
|
||||
defineExpose({
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/center/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/center/media.scss"></style>
|
||||
<style scoped src="~/assets/css/index/index.scss"></style>
|
||||
<style scoped src="~/assets/css/index/media.scss"></style>
|
||||
@ -22,16 +22,6 @@
|
||||
</div>
|
||||
<h3>{{ $t('contact.desc') }}</h3>
|
||||
<div class="row contactus_way">
|
||||
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="ways">
|
||||
<div class="wayscon">
|
||||
<i class="iconfont"></i>
|
||||
<span> {{ $t('contact.card.loc') }} </span>
|
||||
<p>{{ $t('contact.address') }}</p>
|
||||
<!-- <p>{{ contactUsData.contact_us_address }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="ways">
|
||||
<div class="wayscon">
|
||||
@ -51,15 +41,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contactus_way_li col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<div class="ways">
|
||||
<div class="wayscon">
|
||||
<i class="iconfont"></i>
|
||||
<span>{{ $t('contact.card.whatsapp') }}</span>
|
||||
<p>{{ contactUsData.contact_us_mobile_phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 联系方式填写表单 -->
|
||||
@ -113,7 +94,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PopupSidebar></PopupSidebar>
|
||||
<!-- <PopupSidebar></PopupSidebar> -->
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
76
pages/disclaimer.vue
Normal file
76
pages/disclaimer.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
<Meta name="baidu-site-verification" content="" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<!-- <Poster :type=1 :title="$t('common.poster.contact')"></Poster> -->
|
||||
|
||||
<div class="Center-main">
|
||||
<div class="container">
|
||||
<section>
|
||||
|
||||
<div class="row center-top-pos-box">
|
||||
<div class="col-lg-12">
|
||||
|
||||
<div class="center-content-box animate__animated animate__fadeInUp">
|
||||
<p class="font">版权声明 (本站)</p>
|
||||
<p>本站部分资源是搜集整理而成，版权均归原作者所有。本站仅提供一个观摩学习的环境，将不对任何资源负法律责任。</p>
|
||||
<p>若无意中侵犯到您的版权利益，请来信联系我们，我们会在收到信息后会尽快给予处理！</p>
|
||||
<p>本站为分享资源站点，网站内所有资源仅供学习交流之用。</p>
|
||||
<p>联系邮箱2679599887@qq.com。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
|
||||
/** 基础变量 **/
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
/** 业务方法 */
|
||||
|
||||
|
||||
/** 接口对接 **/
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 5, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
htmlAddAnimations({
|
||||
tagDom: 'Center-main', preload: 1, isRe: true
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
/**export**/
|
||||
defineExpose({
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/center/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/center/media.scss"></style>
|
||||
<style scoped src="~/assets/css/index/index.scss"></style>
|
||||
<style scoped src="~/assets/css/index/media.scss"></style>
|
||||
287
pages/index.vue
287
pages/index.vue
@ -50,33 +50,32 @@
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div v-for="item in homeDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -84,11 +83,10 @@
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -97,9 +95,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -113,33 +108,32 @@
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div v-for="item in unityDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -147,11 +141,10 @@
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -161,7 +154,7 @@
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
<el-button class="btn" type="primary" size="large" @click="handleJumpRoute('/project/0-1')">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -176,33 +169,32 @@
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div v-for="item in modelDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -210,11 +202,10 @@
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -224,7 +215,7 @@
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
<el-button class="btn" type="primary" size="large" @click="handleJumpRoute('/model/0-1')">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -239,33 +230,32 @@
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div v-for="item in animationDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -273,11 +263,10 @@
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -287,7 +276,7 @@
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
<el-button class="btn" type="primary" size="large" @click="handleJumpRoute('/animation/0-1')">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -302,33 +291,32 @@
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div v-for="item in softwareDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -336,11 +324,10 @@
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -350,7 +337,7 @@
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
<el-button class="btn" type="primary" size="large" @click="handleJumpRoute('/software/0-1')">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -365,9 +352,162 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { fontSizeReactive } from "~/utils/Tool";
|
||||
let newsList = ref([
|
||||
])
|
||||
let product_data = ref([])
|
||||
// 精选推荐
|
||||
let homeDataList = ref(
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
]
|
||||
)
|
||||
// unity工程
|
||||
let unityDataList = ref(
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
]
|
||||
)
|
||||
// 模型
|
||||
let modelDataList = ref(
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
]
|
||||
)
|
||||
// 动画
|
||||
let animationDataList = ref(
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
]
|
||||
)
|
||||
// 软件
|
||||
let softwareDataList = ref(
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
category_id: "",
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "BIneder 微动态场景旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
]
|
||||
)
|
||||
|
||||
/** 基础变量 **/
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
@ -460,21 +600,12 @@ useFetch('/api/news/getNewsList', { params: { idx: 1, locale: locale.value } }).
|
||||
// console.log(newsList.value, 'news@@');
|
||||
})
|
||||
|
||||
const getNewsLink = function (item) {
|
||||
if (item.news_link) {
|
||||
return item.news_link;
|
||||
} else {
|
||||
return "/news/details/" + item.news_id;
|
||||
}
|
||||
const router = useRouter()
|
||||
const handleJumpRoute = function (item) {
|
||||
let url = "/zh" + item
|
||||
router.push(url)
|
||||
}
|
||||
|
||||
function getProductLink(item) {
|
||||
if (item.product_link) {
|
||||
return item.product_link;
|
||||
} else {
|
||||
return "/product/details/" + item.product_id;
|
||||
}
|
||||
}
|
||||
|
||||
/**export**/
|
||||
defineExpose({
|
||||
|
||||
@ -12,6 +12,61 @@
|
||||
|
||||
<main class="container font-size-box">
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-big-box">
|
||||
<div class="search-box">
|
||||
<!-- <el-select class="search-select" v-model="queryParams.categoryId" placeholder="请选择"
|
||||
style="width: 90px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
<div class="searchBox">
|
||||
|
||||
<input v-model="queryParams.search" class="searchInput" type="text" name=""
|
||||
placeholder="开启精彩搜索" @keydown="keyDownEvent">
|
||||
<button class="searchButton" href="#" @click="handleSearch">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"
|
||||
fill="none">
|
||||
<g clip-path="url(#clip0_2_17)">
|
||||
<g filter="url(#filter0_d_2_17)">
|
||||
<path
|
||||
d="M23.7953 23.9182L19.0585 19.1814M19.0585 19.1814C19.8188 18.4211 20.4219 17.5185 20.8333 16.5251C21.2448 15.5318 21.4566 14.4671 21.4566 13.3919C21.4566 12.3167 21.2448 11.252 20.8333 10.2587C20.4219 9.2653 19.8188 8.36271 19.0585 7.60242C18.2982 6.84214 17.3956 6.23905 16.4022 5.82759C15.4089 5.41612 14.3442 5.20435 13.269 5.20435C12.1938 5.20435 11.1291 5.41612 10.1358 5.82759C9.1424 6.23905 8.23981 6.84214 7.47953 7.60242C5.94407 9.13789 5.08145 11.2204 5.08145 13.3919C5.08145 15.5634 5.94407 17.6459 7.47953 19.1814C9.01499 20.7168 11.0975 21.5794 13.269 21.5794C15.4405 21.5794 17.523 20.7168 19.0585 19.1814Z"
|
||||
stroke="white" stroke-width="3" stroke-linecap="round"
|
||||
stroke-linejoin="round" shape-rendering="crispEdges"></path>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2_17" x="-0.418549" y="3.70435" width="29.7139"
|
||||
height="29.7139" filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha">
|
||||
</feColorMatrix>
|
||||
<feOffset dy="4"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
|
||||
<feComposite in2="hardAlpha" operator="out"></feComposite>
|
||||
<feColorMatrix type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_2_17"></feBlend>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_17"
|
||||
result="shape"></feBlend>
|
||||
</filter>
|
||||
<clipPath id="clip0_2_17">
|
||||
<rect width="28.0702" height="28.0702" fill="white"
|
||||
transform="translate(0.403503 0.526367)"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 分类 -->
|
||||
<div class="category-big-box">
|
||||
|
||||
@ -77,47 +132,48 @@
|
||||
<div v-if="dataList.length != 0" class="content-big-box animate__animated animate__fadeIn">
|
||||
<div class="row content-list-box">
|
||||
|
||||
<nuxt-link v-for="(item, index) in dataList" :to="getHerf(getLink(item))" class="col-lg-3 col-md-6 col-sm-6 col-xs-6 jump">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nuxt-link v-for="(item, index) in dataList" :to="getHerf(getLink(item))"
|
||||
class="col-lg-3 col-md-6 col-sm-6 col-xs-6 jump">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
@ -207,6 +263,25 @@ let typeList = ref([
|
||||
let typeChildrenList = ref([
|
||||
])
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: 1,
|
||||
label: 'Unity工程',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '模型',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '动画',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '软件',
|
||||
},
|
||||
]
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
@ -222,7 +297,9 @@ const queryParams = reactive({
|
||||
page: parseInt(route.params.page) || 1,
|
||||
idx: parseInt(route.params.idx) || 0,
|
||||
locale: locale.value,
|
||||
limit: 10
|
||||
limit: 10,
|
||||
categoryId: null,
|
||||
search: ""
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
@ -231,6 +308,16 @@ const routerJump = function () {
|
||||
router.push("1-" + String(page))
|
||||
}
|
||||
|
||||
let url = getHerf('/search/0-1?s=')
|
||||
const handleSearch = function(){
|
||||
router.push(url + queryParams.search)
|
||||
}
|
||||
|
||||
const keyDownEvent = $event => {
|
||||
$event.keyCode === 13 && (router.push(url + queryParams.search))
|
||||
}
|
||||
|
||||
|
||||
const getLink = function (item) {
|
||||
if (item?.link) {
|
||||
return item?.link;
|
||||
@ -260,6 +347,9 @@ const handleSort = (type) => {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
@ -271,7 +361,7 @@ useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).t
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
||||
// total.value = JSON.parse(res.data.value).count || 0
|
||||
// res.unshift({
|
||||
// href: '/product/product_list/0-1',
|
||||
// href: '/project/project/0-1',
|
||||
// name: t('home.products.all')
|
||||
// })
|
||||
// newsList.value = JSON.parse(res.data.value).data || []
|
||||
|
||||
@ -1,77 +1,386 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ newsDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
|
||||
<Title>{{ dataDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
|
||||
<Header></Header>
|
||||
<Poster :type=1 :title="newsDetail.news_title"></Poster>
|
||||
|
||||
<div class="container">
|
||||
<div class="news">
|
||||
<div class="news__title">
|
||||
<h1>{{ newsDetail.news_title }}</h1>
|
||||
<h3 class="news__date">{{ newsDetail.news_issue_date }}</h3>
|
||||
</div>
|
||||
<div class="container details-pos-box">
|
||||
|
||||
<!-- 渲染新闻富文本 -->
|
||||
<section class="news__detail" v-html="newsDetail.news_content"></section>
|
||||
<div class="details-big-box row">
|
||||
|
||||
<div class="news__paging">
|
||||
<div class="news__paging-prev">
|
||||
<template v-if="newsDetail.prev">
|
||||
<nuxt-link :to="getHerf('/news/details/' + newsDetail.prev?.news_id)">
|
||||
{{ newsDetail.prev?.news_title }}
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('news.noprev') }}
|
||||
</template>
|
||||
<!-- 左边 -->
|
||||
<div class="details-left-box col-lg-8 col-md-6 col-sm-12">
|
||||
<div class="preview-box">
|
||||
<Magnify :imgSrc='checkimg' :imgBigSrc='checkimg' :imgBigRect='imgBigRect' rate="200">
|
||||
</Magnify>
|
||||
<div class="exzoom">
|
||||
<div class="exzoom_nav">
|
||||
<p class="exzoom_nav_inner">
|
||||
<span v-for="(item, i) in detail_list_img" :key="i" @mouseenter="changetype">
|
||||
<span :class="count - 1 == i ? 'exzoom_span current' : 'exzoom_span'">
|
||||
<img :src="item" width="60">
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="exzoom_btn">
|
||||
<a href="javascript:void(0);" class="exzoom_prev_btn" @click="exzoo_click(0)">
|
||||
<el-icon>
|
||||
<Back />
|
||||
</el-icon>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="exzoom_next_btn" @click="exzoo_click(1)">
|
||||
<el-icon>
|
||||
<Right />
|
||||
</el-icon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="news__paging-next">
|
||||
<template v-if="newsDetail.next">
|
||||
<nuxt-link :to="getHerf('/news/details/' + newsDetail.next?.news_id)">
|
||||
{{ newsDetail.next?.news_title }}
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('news.nonext') }}
|
||||
</template>
|
||||
<div clas="left-detail-pos-box">
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">简介</div>
|
||||
<div class="left-detail-content">{{ dataDetail.intro }}</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">描述</div>
|
||||
<div class="left-detail-content" v-html="dataDetail.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边边 -->
|
||||
<div class="details-right-box col-lg-4 col-md-6 col-sm-12">
|
||||
<h1 class="details-title">Horse Animset Pro (Riding System)</h1>
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-content-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<div class="content-category">{{ dataDetail.categoty_name }}</div>
|
||||
</div>
|
||||
<div class="content-rate-line">|</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<StarFilled />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">({{ dataDetail.collect_num }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-price">{{ dataDetail.price ? 0 : "免费" }}</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="content-rate-icon-box detail-icon-box">
|
||||
<el-icon class="content-rate-icon detail-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num detail-rate-text">{{ dataDetail.view_num }} 浏览量</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="play-btn-box">
|
||||
<button class="play-btn">
|
||||
<div class="btn-text">P L A Y</div>
|
||||
<div id="clip">
|
||||
<div id="leftTop" class="corner"></div>
|
||||
<div id="rightBottom" class="corner"></div>
|
||||
<div id="rightTop" class="corner"></div>
|
||||
<div id="leftBottom" class="corner"></div>
|
||||
</div>
|
||||
<span id="rightArrow" class="arrow"></span>
|
||||
<span id="leftArrow" class="arrow"></span>
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn" @click="redirectToAnotherProject(dataDetail.download_link)">下载工程</button>
|
||||
<div class="btn-collect">
|
||||
<img @click="handleCollect" :src=collectImg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child"
|
||||
@click="redirectToAnotherProject(dataDetail.material_link)">下载资源</button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child" @click="redirectToAnotherProject(dataDetail.note_link)">查看笔记</button>
|
||||
</div>
|
||||
|
||||
<div class="right-detail-intro-pos-box">
|
||||
<div class="content-line"></div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">文件大小</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.flie_size }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">发布日期</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.send_time }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">Unity 版本</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.unity_version }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">URP 支持</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.is_urp ? '支持' : '不支持' }}</div>
|
||||
</div>
|
||||
<div class="Instructions">仅供交流学习研究使用，版权归原作者所有，禁止商业使用。【如有侵权请联系删除】</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="content-line"></div> -->
|
||||
|
||||
<!-- 评论 -->
|
||||
<div class="right-comment-pos-box">
|
||||
<div class="left-detail-title">评论</div>
|
||||
|
||||
<div class="right-comment-input-box">
|
||||
<div class="content-comment-user-img-box">
|
||||
<el-avatar class="content-comment-user-img" :size="50" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="comment-input-box">
|
||||
<el-input v-model="commentContent" :rows="3" type="textarea" placeholder="欢迎您留下宝贵的见解！" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-btn">
|
||||
<el-button type="primary" @click="handleSendComment">发送评论</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-for="item in dataDetail.comment_list">
|
||||
<div class="custom-comment-big-box">
|
||||
<div class="custom-comment-avatar">
|
||||
<el-avatar class="content-comment-user-img" :size="45" :src=item.user_img />
|
||||
</div>
|
||||
<div class="custom-comment-content-box">
|
||||
<div class="custom-comment-content-user-name">{{ item.user_name }}</div>
|
||||
<div class="custom-comment-content-text">{{ item.comment_content }}</div>
|
||||
<div class="custom-comment-content-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="details-pos-box">
|
||||
<div class="details-title-box">
|
||||
<div class="details-title"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<Final></Final>
|
||||
<PopupSidebar></PopupSidebar>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { l, locale } = useI18n();
|
||||
// --- 接口对接 ---
|
||||
// 参数
|
||||
const route = useRoute()
|
||||
import { View } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 预对接
|
||||
let newsDetail = ref({})
|
||||
let dataDetail = ref({
|
||||
id: 1,
|
||||
title: "Horse Animset Pro (Riding System)",
|
||||
user_id: 1,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
collect_num: 3086,
|
||||
view_num: 506,
|
||||
categoty_name: "模型 > 动物",
|
||||
price: 0,
|
||||
download_link: "https://drive.aerwen.net/d/aerwen/unity%E6%BA%90%E7%A0%81/Class/%E9%A1%BA%E8%81%8C%E5%AD%A6%E4%B9%A0%E9%80%9A%E8%AF%BE%E7%A8%8B/%E7%BB%93%E8%AF%BE/9%E4%BB%BB%E5%8A%A1%EF%BC%9A%E5%88%86%E6%95%B0%E7%BB%9F%E8%AE%A1.unitypackage",
|
||||
material_link: "",
|
||||
note_link: "https://blog.csdn.net/weixin_60435181/article/details/139512841?spm=1001.2014.3001.5501",
|
||||
is_collect: false,
|
||||
is_urp: false,
|
||||
flie_size: "8.2MB",
|
||||
send_time: "2024-03-01",
|
||||
unity_version: "2019.4.23或更高",
|
||||
comment_list: [
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://thirdqq.qlogo.cn/ek_qqapp/AQIMauLMSKSQoxA7pKYDZXYRTtVrZrOjiarOroKgySzPZibMamTMEfys5XN3vCQwRQzCajRylXORhbmTSDZCTIV0djV5ybY2dOF0cqxYQzgicmQ7pXFLXs/100",
|
||||
user_name: "hqbb",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "大佬牛逼！",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "123",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "测试",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
intro: "Riding System using the Animal Controller to make your character Ride any creature",
|
||||
content: "<p><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>✅✅升级至 4.2+ ✅✅<br></strong></span></p><p style=\"text-align: start;\">已移除大量脚本，所以为了顺利升级，请遵循以下步骤：</p><p style=\"text-align: start;\">1- 移除 [Malbers Animation\\Common] 文件夹</p><p style=\"text-align: start;\">2- 将 [Horse Animset Pro 4.2+] 再次导入项目<br><a href=\"https://malbersanimations.gitbook.io/animal-controller/quickstart/upgrading-to-ac-1.2-hap-4.2\" target=\"_blank\" style=\"text-align: start;\">升级过程中的常见问题 (AC)</a><br><br><br></p><p style=\"text-align: start;\">这就是你的终极骑行系统！<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>高质量的动画<br></strong></span></p><p style=\"text-align: start;\">Horse AnimSet Pro(HAP) 是一套动画框架和骑行系统控制器，基于根运动，适合于任何人形角色。该资源开始时就像是一个简单的马模型和动画包，但经过不断发展，它已经成为一套强大而灵活的骑行控制器。它包括一个来自于标准资源的基础角色控制器，但可以与你创建的更高级的角色控制器搭配使用，也可以与商店中任何让人惊叹的角色控制器（TCP 或 FPC）搭配使用。</p><p style=\"text-align: start;\">该资源包在不断扩展，每次更新都推出了更多功能和动画效果！<br></p><p style=\"text-align: start;\"><a href=\"http://bit.ly/HAPIntegrations\" target=\"_blank\">集成</a> | <a href=\"http://bit.ly/2DuntpT\" target=\"_blank\">骑上任何生物</a> | <a href=\"http://bit.ly/HorseWebGL\" target=\"_blank\">网络演示</a> | <a href=\"http://goo.gl/BLTI4t\" target=\"_blank\">论坛</a> | <a href=\"http://bit.ly/MalbersHAPDoc\" target=\"_blank\">手册<br><br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>⚙ 功能 ⚙<br></strong></span></a></p><p style=\"text-align: start;\">马：</p><p style=\"text-align: start;\">- 80 个动画剪辑</p><p style=\"text-align: start;\">- 2 种马的风格（现实、多边形艺术）</p><p style=\"text-align: start;\">- 针对每种马的风格提供多种纹理集合</p><p style=\"text-align: start;\">- LOD</p><p style=\"text-align: start;\">- 盔甲、缰绳和马鞍</p><p style=\"text-align: start;\">- 针对缰绳和马鬃的 Unity 布料模拟不能用于 Unity 2019</p><p style=\"text-align: start;\">- 声音</p><p style=\"text-align: start;\">- 基础脚步系统（足迹声音和足迹粒子）</p><p style=\"text-align: start;\">- 用于管理所有 Malbers Animations 生物的动物控制器</p><p style=\"text-align: start;\">- 状态：游泳、摔倒、跳跃、攻击、死亡、行走、小跑、慢跑、疾驰、冲刺</p><p style=\"text-align: start;\">- 定向伤害系统</p><p style=\"text-align: start;\">- 扫射</p><p style=\"text-align: start;\">- 镜头基础输入</p><p style=\"text-align: start;\">- 地形校正</p><p style=\"text-align: start;\">- 支持 NavMesh Agent。基础 AI</p><p style=\"text-align: start;\">- 移动端友好</p><p style=\"text-align: start;\">骑行者：</p><p style=\"text-align: start;\">- 132 个动画剪辑（可用于人形角色设定，以获得更好的兼容性）</p><p style=\"text-align: start;\">- 附带 1 个纹理集合的牛仔模型</p><p style=\"text-align: start;\">- 骑行者系统（TCP 和 FPC）</p><p style=\"text-align: start;\">- 骑行者战斗系统：弓箭、手枪、混战（即将推出长矛、步枪、魔法物品、投掷物）</p><p style=\"text-align: start;\">- 非常非常基础的库存系统，用以演示骑行者 - 战斗系统与外部库存的兼容性。</p><p style=\"text-align: start;\">实用工具：</p><p style=\"text-align: start;\">- 材料更换器</p><p style=\"text-align: start;\">- 混合形状管理器</p><p style=\"text-align: start;\">- 网格更换器</p><p style=\"text-align: start;\">- 动画器消息行为</p><p style=\"text-align: start;\">- 动画器声音行为</p><p style=\"text-align: start;\">- 头部瞄准</p><p style=\"text-align: start;\">- 武器（模型、纹理和脚本）</p><p style=\"text-align: start;\">- 动物基础 AI</p><p style=\"text-align: start;\">- 带镜头状态的基础镜头设置系统。</p><p style=\"text-align: start;\">- 兼容所有 Malbers 动物<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><em>- 兼容 Invector TCP、Ootii MC，即将推出更多集成！未来更新<br></em></span></p><p style=\"text-align: start;\">联系人：<a href=\"mailto:malbers.shark87@gmail.com\" target=\"_blank\">malbers.shark87@gmail.com</a></p><p style=\"text-align: start;\">查看日志以了解版本变化</p><p style=\"text-align: start;\"><br></p><p style=\"text-align: start;\"><br></p>"
|
||||
})
|
||||
let detail_list_img = ref([
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/0f73facc-8e8c-4b94-8de3-67ca8386f5ac.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/1cc96654-37ad-4b7f-ae1b-0dead9d9fd76.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
])
|
||||
|
||||
// 参数
|
||||
const { l, locale } = useI18n();
|
||||
const route = useRoute()
|
||||
const checkimg = ref('https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp')
|
||||
const imgBigRect = ref({ h: 50, w: 50, l: 51, t: 0 })
|
||||
const count = ref(1)
|
||||
const collectImg = ref("/img/details/heart_null.png")
|
||||
const commentContent = ref("")
|
||||
|
||||
// 方法
|
||||
const changetype = function () {
|
||||
let element = document.getElementsByClassName('exzoom_span')
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
element[i].addEventListener('mouseenter', function () {
|
||||
for (let s = 0; s < element.length; s++) {
|
||||
element[s].classList.remove('current')
|
||||
|
||||
}
|
||||
element[i].classList.add('current')
|
||||
count.value = i + 1;
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
});
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
const exzoo_click = function (val) {
|
||||
|
||||
if (val == 1) {
|
||||
|
||||
if (count.value == detail_list_img.value.length) {
|
||||
count.value = 1
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
// console.log(checkimg.value);
|
||||
count.value++
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
} else {
|
||||
|
||||
if (count.value <= 1) {
|
||||
count.value = detail_list_img.value.length
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
count.value--
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
|
||||
// 点击收藏
|
||||
const handleCollect = function () {
|
||||
if (dataDetail.value.is_collect == false) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
dataDetail.value.is_collect = true
|
||||
ElMessage({
|
||||
message: '收藏成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
dataDetail.value.is_collect = false
|
||||
ElMessage({
|
||||
message: '取消收藏',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化收藏状态
|
||||
const setCollect = function () {
|
||||
if (dataDetail.value.is_collect == true) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
}
|
||||
}
|
||||
|
||||
// 访问其他网站
|
||||
const redirectToAnotherProject = function (url) {
|
||||
const returnUrl = window.location.href;
|
||||
// window.open = url + '?returnUrl=' + encodeURIComponent(returnUrl);//本页面打开
|
||||
window.open(url);//新标签打开
|
||||
}
|
||||
|
||||
// 发送评论
|
||||
const handleSendComment = function () {
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
|
||||
setCollect()
|
||||
})
|
||||
|
||||
|
||||
|
||||
// --- 接口对接 ---
|
||||
// 获取新闻详情
|
||||
useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
|
||||
newsDetail.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
// useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
|
||||
// dataDetail.value = JSON.parse(res.data.value).data
|
||||
// })
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
@ -83,83 +392,5 @@ useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.news {
|
||||
padding: 80px 0px;
|
||||
|
||||
&__title {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 40px;
|
||||
border-bottom: 1px solid var(--rootColor);
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
:deep(p) {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #222;
|
||||
text-indent: 2em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 30px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
&__paging {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-prev,
|
||||
&-next {
|
||||
width: 45%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--rootColor);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 13px 10px;
|
||||
transition: all 0.35s ease-in-out;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--rootColor);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped src="~/assets/css/business/list/list_details/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/list_details/media.scss"></style>
|
||||
@ -22,7 +22,7 @@
|
||||
<ul id="accordion" class="accordion">
|
||||
<li v-for='item in ProductTypeList_namelist'
|
||||
:class="item.product_type_guid == detail_data.product_type_guid ? 'active' : ''">
|
||||
<nuxt-link :to="getHerf('/product/product_list/' + item.product_type_id + '-1')" class="jump">
|
||||
<nuxt-link :to="getHerf('/project/project/' + item.product_type_id + '-1')" class="jump">
|
||||
<div class="link">
|
||||
{{ item.product_type_name }}
|
||||
</div>
|
||||
@ -243,7 +243,6 @@ onMounted(() => {
|
||||
})
|
||||
const changetype = function () {
|
||||
let element = document.getElementsByClassName('exzoom_span')
|
||||
console.log(element, '@@@@@')
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
element[i].addEventListener('mouseenter', function () {
|
||||
for (let s = 0; s < element.length; s++) {
|
||||
@ -255,7 +254,6 @@ const changetype = function () {
|
||||
checkimg.value = product_list_img.value[count.value - 1]
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
let queryParams = ({
|
||||
product_id: parseInt(route.params.id),
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<li v-for='item in ProductTypeList_namelist'
|
||||
:class="queryParams.product_type_id == item.product_type_id ? 'active' : ''">
|
||||
|
||||
<nuxt-link :to="getHerf('/product/product_list/' + item.product_type_id + '-1' + '#main')"
|
||||
<nuxt-link :to="getHerf('/project/project/' + item.product_type_id + '-1' + '#main')"
|
||||
class="jump">
|
||||
<div class="link">
|
||||
{{ item.product_type_name }}
|
||||
|
||||
367
pages/project/[idx]-[page].vue
Normal file
367
pages/project/[idx]-[page].vue
Normal file
@ -0,0 +1,367 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<Poster :type=2></Poster>
|
||||
|
||||
<div class="background_box">
|
||||
|
||||
<main class="container font-size-box">
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-big-box">
|
||||
<div class="search-box">
|
||||
<!-- <el-select class="search-select" v-model="queryParams.categoryId" placeholder="请选择"
|
||||
style="width: 90px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
<div class="searchBox">
|
||||
|
||||
<input v-model="queryParams.search" class="searchInput" type="text" name=""
|
||||
placeholder="开启精彩搜索" @keydown="keyDownEvent">
|
||||
<button class="searchButton" href="#" @click="handleSearch">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"
|
||||
fill="none">
|
||||
<g clip-path="url(#clip0_2_17)">
|
||||
<g filter="url(#filter0_d_2_17)">
|
||||
<path
|
||||
d="M23.7953 23.9182L19.0585 19.1814M19.0585 19.1814C19.8188 18.4211 20.4219 17.5185 20.8333 16.5251C21.2448 15.5318 21.4566 14.4671 21.4566 13.3919C21.4566 12.3167 21.2448 11.252 20.8333 10.2587C20.4219 9.2653 19.8188 8.36271 19.0585 7.60242C18.2982 6.84214 17.3956 6.23905 16.4022 5.82759C15.4089 5.41612 14.3442 5.20435 13.269 5.20435C12.1938 5.20435 11.1291 5.41612 10.1358 5.82759C9.1424 6.23905 8.23981 6.84214 7.47953 7.60242C5.94407 9.13789 5.08145 11.2204 5.08145 13.3919C5.08145 15.5634 5.94407 17.6459 7.47953 19.1814C9.01499 20.7168 11.0975 21.5794 13.269 21.5794C15.4405 21.5794 17.523 20.7168 19.0585 19.1814Z"
|
||||
stroke="white" stroke-width="3" stroke-linecap="round"
|
||||
stroke-linejoin="round" shape-rendering="crispEdges"></path>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2_17" x="-0.418549" y="3.70435" width="29.7139"
|
||||
height="29.7139" filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha">
|
||||
</feColorMatrix>
|
||||
<feOffset dy="4"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
|
||||
<feComposite in2="hardAlpha" operator="out"></feComposite>
|
||||
<feColorMatrix type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_2_17"></feBlend>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_17"
|
||||
result="shape"></feBlend>
|
||||
</filter>
|
||||
<clipPath id="clip0_2_17">
|
||||
<rect width="28.0702" height="28.0702" fill="white"
|
||||
transform="translate(0.403503 0.526367)"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 分类 -->
|
||||
<div class="category-big-box">
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">分类</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
||||
@click="toggleActive(index)" v-for="(item, index) in typeList">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-box" v-if="typeChildrenList.length !== 0">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">二级分类</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
||||
@click="toggleChildActive(index)" v-for="(item, index) in typeChildrenList">{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-line"></div>
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">排序</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item sort" @click="handleSort(1)">
|
||||
<span>最新</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(2)">
|
||||
<span>推荐</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(3)">
|
||||
<span>下载</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(4)">
|
||||
<span>浏览</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 模块渲染列表 -->
|
||||
<div v-if="dataList.length != 0" class="content-big-box animate__animated animate__fadeIn">
|
||||
<div class="row content-list-box">
|
||||
|
||||
<nuxt-link v-for="(item, index) in dataList" :to="getHerf(getLink(item))"
|
||||
class="col-lg-3 col-md-6 col-sm-6 col-xs-6 jump">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_none" v-else>
|
||||
</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>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 预对接
|
||||
let dataList = ref([
|
||||
{
|
||||
id: 1,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
])
|
||||
let typeList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "全部",
|
||||
isActive: true
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "三渲二",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "交通工具",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "武器兵刃",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
])
|
||||
let typeChildrenList = ref([
|
||||
])
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
let active = reactive({ idx: Number(route.params.idx), name: typeList.value[0] })
|
||||
|
||||
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,
|
||||
locale: locale.value,
|
||||
limit: 10,
|
||||
search: ""
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
const routerJump = function () {
|
||||
let { page } = queryParams
|
||||
router.push("1-" + String(page))
|
||||
}
|
||||
|
||||
const getLink = function (item) {
|
||||
if (item?.link) {
|
||||
return item?.link;
|
||||
} else {
|
||||
return "/model/details/" + item.id;
|
||||
}
|
||||
}
|
||||
|
||||
let url = getHerf('/search/0-1?s=')
|
||||
const handleSearch = function(){
|
||||
router.push(url + queryParams.search)
|
||||
}
|
||||
|
||||
const keyDownEvent = $event => {
|
||||
$event.keyCode === 13 && (router.push(url + queryParams.search))
|
||||
}
|
||||
|
||||
// 切换激活状态的方法
|
||||
const toggleActive = (index) => {
|
||||
typeList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
// 切换子类激活状态的方法
|
||||
const toggleChildActive = (index) => {
|
||||
typeChildrenList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeChildrenList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
const handleSort = (type) => {
|
||||
console.log(type);
|
||||
}
|
||||
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
|
||||
// 获取新闻类型列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
||||
// total.value = JSON.parse(res.data.value).count || 0
|
||||
// res.unshift({
|
||||
// href: '/project/project/0-1',
|
||||
// name: t('home.products.all')
|
||||
// })
|
||||
// newsList.value = JSON.parse(res.data.value).data || []
|
||||
// })
|
||||
|
||||
|
||||
// 获取新闻列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).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 } })
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 2,
|
||||
})
|
||||
htmlAddAnimations()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/list/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/media.scss"></style>
|
||||
396
pages/project/details/[id].vue
Normal file
396
pages/project/details/[id].vue
Normal file
@ -0,0 +1,396 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ dataDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<div class="container details-pos-box">
|
||||
|
||||
<div class="details-big-box row">
|
||||
|
||||
<!-- 左边 -->
|
||||
<div class="details-left-box col-lg-8 col-md-6 col-sm-12">
|
||||
<div class="preview-box">
|
||||
<Magnify :imgSrc='checkimg' :imgBigSrc='checkimg' :imgBigRect='imgBigRect' rate="200">
|
||||
</Magnify>
|
||||
<div class="exzoom">
|
||||
<div class="exzoom_nav">
|
||||
<p class="exzoom_nav_inner">
|
||||
<span v-for="(item, i) in detail_list_img" :key="i" @mouseenter="changetype">
|
||||
<span :class="count - 1 == i ? 'exzoom_span current' : 'exzoom_span'">
|
||||
<img :src="item" width="60">
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="exzoom_btn">
|
||||
<a href="javascript:void(0);" class="exzoom_prev_btn" @click="exzoo_click(0)">
|
||||
<el-icon>
|
||||
<Back />
|
||||
</el-icon>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="exzoom_next_btn" @click="exzoo_click(1)">
|
||||
<el-icon>
|
||||
<Right />
|
||||
</el-icon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div clas="left-detail-pos-box">
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">简介</div>
|
||||
<div class="left-detail-content">{{ dataDetail.intro }}</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">描述</div>
|
||||
<div class="left-detail-content" v-html="dataDetail.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边边 -->
|
||||
<div class="details-right-box col-lg-4 col-md-6 col-sm-12">
|
||||
<h1 class="details-title">Horse Animset Pro (Riding System)</h1>
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-content-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<div class="content-category">{{ dataDetail.categoty_name }}</div>
|
||||
</div>
|
||||
<div class="content-rate-line">|</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<StarFilled />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">({{ dataDetail.collect_num }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-price">{{ dataDetail.price ? 0 : "免费" }}</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="content-rate-icon-box detail-icon-box">
|
||||
<el-icon class="content-rate-icon detail-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num detail-rate-text">{{ dataDetail.view_num }} 浏览量</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="play-btn-box">
|
||||
<button class="play-btn">
|
||||
<div class="btn-text">P L A Y</div>
|
||||
<div id="clip">
|
||||
<div id="leftTop" class="corner"></div>
|
||||
<div id="rightBottom" class="corner"></div>
|
||||
<div id="rightTop" class="corner"></div>
|
||||
<div id="leftBottom" class="corner"></div>
|
||||
</div>
|
||||
<span id="rightArrow" class="arrow"></span>
|
||||
<span id="leftArrow" class="arrow"></span>
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn" @click="redirectToAnotherProject(dataDetail.download_link)">下载工程</button>
|
||||
<div class="btn-collect">
|
||||
<img @click="handleCollect" :src=collectImg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child"
|
||||
@click="redirectToAnotherProject(dataDetail.material_link)">下载资源</button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child" @click="redirectToAnotherProject(dataDetail.note_link)">查看笔记</button>
|
||||
</div>
|
||||
|
||||
<div class="right-detail-intro-pos-box">
|
||||
<div class="content-line"></div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">文件大小</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.flie_size }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">发布日期</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.send_time }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">Unity 版本</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.unity_version }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">URP 支持</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.is_urp ? '支持' : '不支持' }}</div>
|
||||
</div>
|
||||
<div class="Instructions">仅供交流学习研究使用，版权归原作者所有，禁止商业使用。【如有侵权请联系删除】</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="content-line"></div> -->
|
||||
|
||||
<!-- 评论 -->
|
||||
<div class="right-comment-pos-box">
|
||||
<div class="left-detail-title">评论</div>
|
||||
|
||||
<div class="right-comment-input-box">
|
||||
<div class="content-comment-user-img-box">
|
||||
<el-avatar class="content-comment-user-img" :size="50" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="comment-input-box">
|
||||
<el-input v-model="commentContent" :rows="3" type="textarea" placeholder="欢迎您留下宝贵的见解！" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-btn">
|
||||
<el-button type="primary" @click="handleSendComment">发送评论</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-for="item in dataDetail.comment_list">
|
||||
<div class="custom-comment-big-box">
|
||||
<div class="custom-comment-avatar">
|
||||
<el-avatar class="content-comment-user-img" :size="45" :src=item.user_img />
|
||||
</div>
|
||||
<div class="custom-comment-content-box">
|
||||
<div class="custom-comment-content-user-name">{{ item.user_name }}</div>
|
||||
<div class="custom-comment-content-text">{{ item.comment_content }}</div>
|
||||
<div class="custom-comment-content-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="details-pos-box">
|
||||
<div class="details-title-box">
|
||||
<div class="details-title"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<Final></Final>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { View } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 预对接
|
||||
let dataDetail = ref({
|
||||
id: 1,
|
||||
title: "Horse Animset Pro (Riding System)",
|
||||
user_id: 1,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
collect_num: 3086,
|
||||
view_num: 506,
|
||||
categoty_name: "模型 > 动物",
|
||||
price: 0,
|
||||
download_link: "https://drive.aerwen.net/d/aerwen/unity%E6%BA%90%E7%A0%81/Class/%E9%A1%BA%E8%81%8C%E5%AD%A6%E4%B9%A0%E9%80%9A%E8%AF%BE%E7%A8%8B/%E7%BB%93%E8%AF%BE/9%E4%BB%BB%E5%8A%A1%EF%BC%9A%E5%88%86%E6%95%B0%E7%BB%9F%E8%AE%A1.unitypackage",
|
||||
material_link: "",
|
||||
note_link: "https://blog.csdn.net/weixin_60435181/article/details/139512841?spm=1001.2014.3001.5501",
|
||||
is_collect: false,
|
||||
is_urp: false,
|
||||
flie_size: "8.2MB",
|
||||
send_time: "2024-03-01",
|
||||
unity_version: "2019.4.23或更高",
|
||||
comment_list: [
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://thirdqq.qlogo.cn/ek_qqapp/AQIMauLMSKSQoxA7pKYDZXYRTtVrZrOjiarOroKgySzPZibMamTMEfys5XN3vCQwRQzCajRylXORhbmTSDZCTIV0djV5ybY2dOF0cqxYQzgicmQ7pXFLXs/100",
|
||||
user_name: "hqbb",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "大佬牛逼！",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "123",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "测试",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
intro: "Riding System using the Animal Controller to make your character Ride any creature",
|
||||
content: "<p><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>✅✅升级至 4.2+ ✅✅<br></strong></span></p><p style=\"text-align: start;\">已移除大量脚本，所以为了顺利升级，请遵循以下步骤：</p><p style=\"text-align: start;\">1- 移除 [Malbers Animation\\Common] 文件夹</p><p style=\"text-align: start;\">2- 将 [Horse Animset Pro 4.2+] 再次导入项目<br><a href=\"https://malbersanimations.gitbook.io/animal-controller/quickstart/upgrading-to-ac-1.2-hap-4.2\" target=\"_blank\" style=\"text-align: start;\">升级过程中的常见问题 (AC)</a><br><br><br></p><p style=\"text-align: start;\">这就是你的终极骑行系统！<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>高质量的动画<br></strong></span></p><p style=\"text-align: start;\">Horse AnimSet Pro(HAP) 是一套动画框架和骑行系统控制器，基于根运动，适合于任何人形角色。该资源开始时就像是一个简单的马模型和动画包，但经过不断发展，它已经成为一套强大而灵活的骑行控制器。它包括一个来自于标准资源的基础角色控制器，但可以与你创建的更高级的角色控制器搭配使用，也可以与商店中任何让人惊叹的角色控制器（TCP 或 FPC）搭配使用。</p><p style=\"text-align: start;\">该资源包在不断扩展，每次更新都推出了更多功能和动画效果！<br></p><p style=\"text-align: start;\"><a href=\"http://bit.ly/HAPIntegrations\" target=\"_blank\">集成</a> | <a href=\"http://bit.ly/2DuntpT\" target=\"_blank\">骑上任何生物</a> | <a href=\"http://bit.ly/HorseWebGL\" target=\"_blank\">网络演示</a> | <a href=\"http://goo.gl/BLTI4t\" target=\"_blank\">论坛</a> | <a href=\"http://bit.ly/MalbersHAPDoc\" target=\"_blank\">手册<br><br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>⚙ 功能 ⚙<br></strong></span></a></p><p style=\"text-align: start;\">马：</p><p style=\"text-align: start;\">- 80 个动画剪辑</p><p style=\"text-align: start;\">- 2 种马的风格（现实、多边形艺术）</p><p style=\"text-align: start;\">- 针对每种马的风格提供多种纹理集合</p><p style=\"text-align: start;\">- LOD</p><p style=\"text-align: start;\">- 盔甲、缰绳和马鞍</p><p style=\"text-align: start;\">- 针对缰绳和马鬃的 Unity 布料模拟不能用于 Unity 2019</p><p style=\"text-align: start;\">- 声音</p><p style=\"text-align: start;\">- 基础脚步系统（足迹声音和足迹粒子）</p><p style=\"text-align: start;\">- 用于管理所有 Malbers Animations 生物的动物控制器</p><p style=\"text-align: start;\">- 状态：游泳、摔倒、跳跃、攻击、死亡、行走、小跑、慢跑、疾驰、冲刺</p><p style=\"text-align: start;\">- 定向伤害系统</p><p style=\"text-align: start;\">- 扫射</p><p style=\"text-align: start;\">- 镜头基础输入</p><p style=\"text-align: start;\">- 地形校正</p><p style=\"text-align: start;\">- 支持 NavMesh Agent。基础 AI</p><p style=\"text-align: start;\">- 移动端友好</p><p style=\"text-align: start;\">骑行者：</p><p style=\"text-align: start;\">- 132 个动画剪辑（可用于人形角色设定，以获得更好的兼容性）</p><p style=\"text-align: start;\">- 附带 1 个纹理集合的牛仔模型</p><p style=\"text-align: start;\">- 骑行者系统（TCP 和 FPC）</p><p style=\"text-align: start;\">- 骑行者战斗系统：弓箭、手枪、混战（即将推出长矛、步枪、魔法物品、投掷物）</p><p style=\"text-align: start;\">- 非常非常基础的库存系统，用以演示骑行者 - 战斗系统与外部库存的兼容性。</p><p style=\"text-align: start;\">实用工具：</p><p style=\"text-align: start;\">- 材料更换器</p><p style=\"text-align: start;\">- 混合形状管理器</p><p style=\"text-align: start;\">- 网格更换器</p><p style=\"text-align: start;\">- 动画器消息行为</p><p style=\"text-align: start;\">- 动画器声音行为</p><p style=\"text-align: start;\">- 头部瞄准</p><p style=\"text-align: start;\">- 武器（模型、纹理和脚本）</p><p style=\"text-align: start;\">- 动物基础 AI</p><p style=\"text-align: start;\">- 带镜头状态的基础镜头设置系统。</p><p style=\"text-align: start;\">- 兼容所有 Malbers 动物<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><em>- 兼容 Invector TCP、Ootii MC，即将推出更多集成！未来更新<br></em></span></p><p style=\"text-align: start;\">联系人：<a href=\"mailto:malbers.shark87@gmail.com\" target=\"_blank\">malbers.shark87@gmail.com</a></p><p style=\"text-align: start;\">查看日志以了解版本变化</p><p style=\"text-align: start;\"><br></p><p style=\"text-align: start;\"><br></p>"
|
||||
})
|
||||
let detail_list_img = ref([
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/0f73facc-8e8c-4b94-8de3-67ca8386f5ac.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/1cc96654-37ad-4b7f-ae1b-0dead9d9fd76.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
])
|
||||
|
||||
// 参数
|
||||
const { l, locale } = useI18n();
|
||||
const route = useRoute()
|
||||
const checkimg = ref('https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp')
|
||||
const imgBigRect = ref({ h: 50, w: 50, l: 51, t: 0 })
|
||||
const count = ref(1)
|
||||
const collectImg = ref("/img/details/heart_null.png")
|
||||
const commentContent = ref("")
|
||||
|
||||
// 方法
|
||||
const changetype = function () {
|
||||
let element = document.getElementsByClassName('exzoom_span')
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
element[i].addEventListener('mouseenter', function () {
|
||||
for (let s = 0; s < element.length; s++) {
|
||||
element[s].classList.remove('current')
|
||||
|
||||
}
|
||||
element[i].classList.add('current')
|
||||
count.value = i + 1;
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
});
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
const exzoo_click = function (val) {
|
||||
|
||||
if (val == 1) {
|
||||
|
||||
if (count.value == detail_list_img.value.length) {
|
||||
count.value = 1
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
// console.log(checkimg.value);
|
||||
count.value++
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
} else {
|
||||
|
||||
if (count.value <= 1) {
|
||||
count.value = detail_list_img.value.length
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
count.value--
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
|
||||
// 点击收藏
|
||||
const handleCollect = function () {
|
||||
if (dataDetail.value.is_collect == false) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
dataDetail.value.is_collect = true
|
||||
ElMessage({
|
||||
message: '收藏成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
dataDetail.value.is_collect = false
|
||||
ElMessage({
|
||||
message: '取消收藏',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化收藏状态
|
||||
const setCollect = function () {
|
||||
if (dataDetail.value.is_collect == true) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
}
|
||||
}
|
||||
|
||||
// 访问其他网站
|
||||
const redirectToAnotherProject = function (url) {
|
||||
const returnUrl = window.location.href;
|
||||
// window.open = url + '?returnUrl=' + encodeURIComponent(returnUrl);//本页面打开
|
||||
window.open(url);//新标签打开
|
||||
}
|
||||
|
||||
// 发送评论
|
||||
const handleSendComment = function () {
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
|
||||
setCollect()
|
||||
})
|
||||
|
||||
|
||||
|
||||
// --- 接口对接 ---
|
||||
// 获取新闻详情
|
||||
// useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
|
||||
// dataDetail.value = JSON.parse(res.data.value).data
|
||||
// })
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).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/list/list_details/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/list_details/media.scss"></style>
|
||||
315
pages/search/[idx]-[page].vue
Normal file
315
pages/search/[idx]-[page].vue
Normal file
@ -0,0 +1,315 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<!-- <Poster :type=2></Poster> -->
|
||||
|
||||
<div class="background_box">
|
||||
|
||||
<main class="container font-size-box">
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-big-box" style="margin-top: 120px;margin-bottom: 30px;">
|
||||
<div class="search-box">
|
||||
<!-- <el-select class="search-select" v-model="queryParams.categoryId" placeholder="请选择"
|
||||
style="width: 90px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
<div class="searchBox">
|
||||
|
||||
<input v-model="queryParams.search" class="searchInput" type="text" name=""
|
||||
placeholder="开启精彩搜索" @keydown="keyDownEvent">
|
||||
<button class="searchButton" href="#" @click="handleSearch">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"
|
||||
fill="none">
|
||||
<g clip-path="url(#clip0_2_17)">
|
||||
<g filter="url(#filter0_d_2_17)">
|
||||
<path
|
||||
d="M23.7953 23.9182L19.0585 19.1814M19.0585 19.1814C19.8188 18.4211 20.4219 17.5185 20.8333 16.5251C21.2448 15.5318 21.4566 14.4671 21.4566 13.3919C21.4566 12.3167 21.2448 11.252 20.8333 10.2587C20.4219 9.2653 19.8188 8.36271 19.0585 7.60242C18.2982 6.84214 17.3956 6.23905 16.4022 5.82759C15.4089 5.41612 14.3442 5.20435 13.269 5.20435C12.1938 5.20435 11.1291 5.41612 10.1358 5.82759C9.1424 6.23905 8.23981 6.84214 7.47953 7.60242C5.94407 9.13789 5.08145 11.2204 5.08145 13.3919C5.08145 15.5634 5.94407 17.6459 7.47953 19.1814C9.01499 20.7168 11.0975 21.5794 13.269 21.5794C15.4405 21.5794 17.523 20.7168 19.0585 19.1814Z"
|
||||
stroke="white" stroke-width="3" stroke-linecap="round"
|
||||
stroke-linejoin="round" shape-rendering="crispEdges"></path>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2_17" x="-0.418549" y="3.70435" width="29.7139"
|
||||
height="29.7139" filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha">
|
||||
</feColorMatrix>
|
||||
<feOffset dy="4"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
|
||||
<feComposite in2="hardAlpha" operator="out"></feComposite>
|
||||
<feColorMatrix type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_2_17"></feBlend>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_17"
|
||||
result="shape"></feBlend>
|
||||
</filter>
|
||||
<clipPath id="clip0_2_17">
|
||||
<rect width="28.0702" height="28.0702" fill="white"
|
||||
transform="translate(0.403503 0.526367)"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 模块渲染列表 -->
|
||||
<div v-if="dataList.length != 0" class="content-big-box animate__animated animate__fadeIn">
|
||||
<div class="row content-list-box">
|
||||
|
||||
<nuxt-link v-for="(item, index) in dataList" :to="getHerf(getLink(item))"
|
||||
class="col-lg-3 col-md-6 col-sm-6 col-xs-6 jump">
|
||||
<div class="content-box" style="height:530px !important">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-tag type="primary" style="margin-top: 8px;">模型</el-tag>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_none" v-else>
|
||||
</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>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 预对接
|
||||
let dataList = ref([
|
||||
{
|
||||
id: 1,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
])
|
||||
let typeList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "全部",
|
||||
isActive: true
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "三渲二",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "交通工具",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "武器兵刃",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
])
|
||||
let typeChildrenList = ref([
|
||||
])
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
let active = reactive({ idx: Number(route.params.idx), name: typeList.value[0] })
|
||||
|
||||
watch(active, (nv) => {
|
||||
router.push(String(nv['idx']) + "-1")
|
||||
})
|
||||
|
||||
watch(() => route.query.s, (newValue, oldValue) => {
|
||||
queryParams.value.search = newValue
|
||||
// getlist()
|
||||
// window.location.reload();
|
||||
})
|
||||
|
||||
// --- 参数 ---
|
||||
let total = ref(0)
|
||||
const queryParams = ref({
|
||||
page: parseInt(route.params.page) || 1,
|
||||
idx: parseInt(route.params.idx) || 0,
|
||||
locale: locale.value,
|
||||
limit: 10,
|
||||
search: ""
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
const routerJump = function () {
|
||||
let { page } = queryParams.value
|
||||
router.push("1-" + String(page))
|
||||
}
|
||||
|
||||
const getLink = function (item) {
|
||||
if (item?.link) {
|
||||
return item?.link;
|
||||
} else {
|
||||
return "/model/details/" + item.id;
|
||||
}
|
||||
}
|
||||
|
||||
let url = getHerf('/search/0-1?s=')
|
||||
const handleSearch = function(){
|
||||
router.push(url + queryParams.value.search)
|
||||
}
|
||||
|
||||
const keyDownEvent = $event => {
|
||||
$event.keyCode === 13 && (router.push(url + queryParams.value.search))
|
||||
}
|
||||
|
||||
// 切换激活状态的方法
|
||||
const toggleActive = (index) => {
|
||||
typeList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
// 切换子类激活状态的方法
|
||||
const toggleChildActive = (index) => {
|
||||
typeChildrenList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeChildrenList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
const handleSort = (type) => {
|
||||
console.log(type);
|
||||
}
|
||||
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
|
||||
// 获取新闻类型列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
||||
// total.value = JSON.parse(res.data.value).count || 0
|
||||
// res.unshift({
|
||||
// href: '/project/project/0-1',
|
||||
// name: t('home.products.all')
|
||||
// })
|
||||
// newsList.value = JSON.parse(res.data.value).data || []
|
||||
// })
|
||||
|
||||
|
||||
// 获取新闻列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).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 } })
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 2,
|
||||
})
|
||||
htmlAddAnimations()
|
||||
console.log(route.query.s,'搜索url');
|
||||
queryParams.value.search = route.query.s
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/list/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/media.scss"></style>
|
||||
396
pages/search/details/[id].vue
Normal file
396
pages/search/details/[id].vue
Normal file
@ -0,0 +1,396 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ dataDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<div class="container details-pos-box">
|
||||
|
||||
<div class="details-big-box row">
|
||||
|
||||
<!-- 左边 -->
|
||||
<div class="details-left-box col-lg-8 col-md-6 col-sm-12">
|
||||
<div class="preview-box">
|
||||
<Magnify :imgSrc='checkimg' :imgBigSrc='checkimg' :imgBigRect='imgBigRect' rate="200">
|
||||
</Magnify>
|
||||
<div class="exzoom">
|
||||
<div class="exzoom_nav">
|
||||
<p class="exzoom_nav_inner">
|
||||
<span v-for="(item, i) in detail_list_img" :key="i" @mouseenter="changetype">
|
||||
<span :class="count - 1 == i ? 'exzoom_span current' : 'exzoom_span'">
|
||||
<img :src="item" width="60">
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="exzoom_btn">
|
||||
<a href="javascript:void(0);" class="exzoom_prev_btn" @click="exzoo_click(0)">
|
||||
<el-icon>
|
||||
<Back />
|
||||
</el-icon>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="exzoom_next_btn" @click="exzoo_click(1)">
|
||||
<el-icon>
|
||||
<Right />
|
||||
</el-icon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div clas="left-detail-pos-box">
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">简介</div>
|
||||
<div class="left-detail-content">{{ dataDetail.intro }}</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">描述</div>
|
||||
<div class="left-detail-content" v-html="dataDetail.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边边 -->
|
||||
<div class="details-right-box col-lg-4 col-md-6 col-sm-12">
|
||||
<h1 class="details-title">Horse Animset Pro (Riding System)</h1>
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-content-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<div class="content-category">{{ dataDetail.categoty_name }}</div>
|
||||
</div>
|
||||
<div class="content-rate-line">|</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<StarFilled />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">({{ dataDetail.collect_num }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-price">{{ dataDetail.price ? 0 : "免费" }}</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="content-rate-icon-box detail-icon-box">
|
||||
<el-icon class="content-rate-icon detail-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num detail-rate-text">{{ dataDetail.view_num }} 浏览量</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="play-btn-box">
|
||||
<button class="play-btn">
|
||||
<div class="btn-text">P L A Y</div>
|
||||
<div id="clip">
|
||||
<div id="leftTop" class="corner"></div>
|
||||
<div id="rightBottom" class="corner"></div>
|
||||
<div id="rightTop" class="corner"></div>
|
||||
<div id="leftBottom" class="corner"></div>
|
||||
</div>
|
||||
<span id="rightArrow" class="arrow"></span>
|
||||
<span id="leftArrow" class="arrow"></span>
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn" @click="redirectToAnotherProject(dataDetail.download_link)">下载工程</button>
|
||||
<div class="btn-collect">
|
||||
<img @click="handleCollect" :src=collectImg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child"
|
||||
@click="redirectToAnotherProject(dataDetail.material_link)">下载资源</button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child" @click="redirectToAnotherProject(dataDetail.note_link)">查看笔记</button>
|
||||
</div>
|
||||
|
||||
<div class="right-detail-intro-pos-box">
|
||||
<div class="content-line"></div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">文件大小</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.flie_size }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">发布日期</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.send_time }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">Unity 版本</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.unity_version }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">URP 支持</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.is_urp ? '支持' : '不支持' }}</div>
|
||||
</div>
|
||||
<div class="Instructions">仅供交流学习研究使用，版权归原作者所有，禁止商业使用。【如有侵权请联系删除】</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="content-line"></div> -->
|
||||
|
||||
<!-- 评论 -->
|
||||
<div class="right-comment-pos-box">
|
||||
<div class="left-detail-title">评论</div>
|
||||
|
||||
<div class="right-comment-input-box">
|
||||
<div class="content-comment-user-img-box">
|
||||
<el-avatar class="content-comment-user-img" :size="50" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="comment-input-box">
|
||||
<el-input v-model="commentContent" :rows="3" type="textarea" placeholder="欢迎您留下宝贵的见解！" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-btn">
|
||||
<el-button type="primary" @click="handleSendComment">发送评论</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-for="item in dataDetail.comment_list">
|
||||
<div class="custom-comment-big-box">
|
||||
<div class="custom-comment-avatar">
|
||||
<el-avatar class="content-comment-user-img" :size="45" :src=item.user_img />
|
||||
</div>
|
||||
<div class="custom-comment-content-box">
|
||||
<div class="custom-comment-content-user-name">{{ item.user_name }}</div>
|
||||
<div class="custom-comment-content-text">{{ item.comment_content }}</div>
|
||||
<div class="custom-comment-content-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="details-pos-box">
|
||||
<div class="details-title-box">
|
||||
<div class="details-title"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<Final></Final>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { View } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 预对接
|
||||
let dataDetail = ref({
|
||||
id: 1,
|
||||
title: "Horse Animset Pro (Riding System)",
|
||||
user_id: 1,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
collect_num: 3086,
|
||||
view_num: 506,
|
||||
categoty_name: "模型 > 动物",
|
||||
price: 0,
|
||||
download_link: "https://drive.aerwen.net/d/aerwen/unity%E6%BA%90%E7%A0%81/Class/%E9%A1%BA%E8%81%8C%E5%AD%A6%E4%B9%A0%E9%80%9A%E8%AF%BE%E7%A8%8B/%E7%BB%93%E8%AF%BE/9%E4%BB%BB%E5%8A%A1%EF%BC%9A%E5%88%86%E6%95%B0%E7%BB%9F%E8%AE%A1.unitypackage",
|
||||
material_link: "",
|
||||
note_link: "https://blog.csdn.net/weixin_60435181/article/details/139512841?spm=1001.2014.3001.5501",
|
||||
is_collect: false,
|
||||
is_urp: false,
|
||||
flie_size: "8.2MB",
|
||||
send_time: "2024-03-01",
|
||||
unity_version: "2019.4.23或更高",
|
||||
comment_list: [
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://thirdqq.qlogo.cn/ek_qqapp/AQIMauLMSKSQoxA7pKYDZXYRTtVrZrOjiarOroKgySzPZibMamTMEfys5XN3vCQwRQzCajRylXORhbmTSDZCTIV0djV5ybY2dOF0cqxYQzgicmQ7pXFLXs/100",
|
||||
user_name: "hqbb",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "大佬牛逼！",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "123",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "测试",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
intro: "Riding System using the Animal Controller to make your character Ride any creature",
|
||||
content: "<p><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>✅✅升级至 4.2+ ✅✅<br></strong></span></p><p style=\"text-align: start;\">已移除大量脚本，所以为了顺利升级，请遵循以下步骤：</p><p style=\"text-align: start;\">1- 移除 [Malbers Animation\\Common] 文件夹</p><p style=\"text-align: start;\">2- 将 [Horse Animset Pro 4.2+] 再次导入项目<br><a href=\"https://malbersanimations.gitbook.io/animal-controller/quickstart/upgrading-to-ac-1.2-hap-4.2\" target=\"_blank\" style=\"text-align: start;\">升级过程中的常见问题 (AC)</a><br><br><br></p><p style=\"text-align: start;\">这就是你的终极骑行系统！<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>高质量的动画<br></strong></span></p><p style=\"text-align: start;\">Horse AnimSet Pro(HAP) 是一套动画框架和骑行系统控制器，基于根运动，适合于任何人形角色。该资源开始时就像是一个简单的马模型和动画包，但经过不断发展，它已经成为一套强大而灵活的骑行控制器。它包括一个来自于标准资源的基础角色控制器，但可以与你创建的更高级的角色控制器搭配使用，也可以与商店中任何让人惊叹的角色控制器（TCP 或 FPC）搭配使用。</p><p style=\"text-align: start;\">该资源包在不断扩展，每次更新都推出了更多功能和动画效果！<br></p><p style=\"text-align: start;\"><a href=\"http://bit.ly/HAPIntegrations\" target=\"_blank\">集成</a> | <a href=\"http://bit.ly/2DuntpT\" target=\"_blank\">骑上任何生物</a> | <a href=\"http://bit.ly/HorseWebGL\" target=\"_blank\">网络演示</a> | <a href=\"http://goo.gl/BLTI4t\" target=\"_blank\">论坛</a> | <a href=\"http://bit.ly/MalbersHAPDoc\" target=\"_blank\">手册<br><br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>⚙ 功能 ⚙<br></strong></span></a></p><p style=\"text-align: start;\">马：</p><p style=\"text-align: start;\">- 80 个动画剪辑</p><p style=\"text-align: start;\">- 2 种马的风格（现实、多边形艺术）</p><p style=\"text-align: start;\">- 针对每种马的风格提供多种纹理集合</p><p style=\"text-align: start;\">- LOD</p><p style=\"text-align: start;\">- 盔甲、缰绳和马鞍</p><p style=\"text-align: start;\">- 针对缰绳和马鬃的 Unity 布料模拟不能用于 Unity 2019</p><p style=\"text-align: start;\">- 声音</p><p style=\"text-align: start;\">- 基础脚步系统（足迹声音和足迹粒子）</p><p style=\"text-align: start;\">- 用于管理所有 Malbers Animations 生物的动物控制器</p><p style=\"text-align: start;\">- 状态：游泳、摔倒、跳跃、攻击、死亡、行走、小跑、慢跑、疾驰、冲刺</p><p style=\"text-align: start;\">- 定向伤害系统</p><p style=\"text-align: start;\">- 扫射</p><p style=\"text-align: start;\">- 镜头基础输入</p><p style=\"text-align: start;\">- 地形校正</p><p style=\"text-align: start;\">- 支持 NavMesh Agent。基础 AI</p><p style=\"text-align: start;\">- 移动端友好</p><p style=\"text-align: start;\">骑行者：</p><p style=\"text-align: start;\">- 132 个动画剪辑（可用于人形角色设定，以获得更好的兼容性）</p><p style=\"text-align: start;\">- 附带 1 个纹理集合的牛仔模型</p><p style=\"text-align: start;\">- 骑行者系统（TCP 和 FPC）</p><p style=\"text-align: start;\">- 骑行者战斗系统：弓箭、手枪、混战（即将推出长矛、步枪、魔法物品、投掷物）</p><p style=\"text-align: start;\">- 非常非常基础的库存系统，用以演示骑行者 - 战斗系统与外部库存的兼容性。</p><p style=\"text-align: start;\">实用工具：</p><p style=\"text-align: start;\">- 材料更换器</p><p style=\"text-align: start;\">- 混合形状管理器</p><p style=\"text-align: start;\">- 网格更换器</p><p style=\"text-align: start;\">- 动画器消息行为</p><p style=\"text-align: start;\">- 动画器声音行为</p><p style=\"text-align: start;\">- 头部瞄准</p><p style=\"text-align: start;\">- 武器（模型、纹理和脚本）</p><p style=\"text-align: start;\">- 动物基础 AI</p><p style=\"text-align: start;\">- 带镜头状态的基础镜头设置系统。</p><p style=\"text-align: start;\">- 兼容所有 Malbers 动物<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><em>- 兼容 Invector TCP、Ootii MC，即将推出更多集成！未来更新<br></em></span></p><p style=\"text-align: start;\">联系人：<a href=\"mailto:malbers.shark87@gmail.com\" target=\"_blank\">malbers.shark87@gmail.com</a></p><p style=\"text-align: start;\">查看日志以了解版本变化</p><p style=\"text-align: start;\"><br></p><p style=\"text-align: start;\"><br></p>"
|
||||
})
|
||||
let detail_list_img = ref([
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/0f73facc-8e8c-4b94-8de3-67ca8386f5ac.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/1cc96654-37ad-4b7f-ae1b-0dead9d9fd76.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
])
|
||||
|
||||
// 参数
|
||||
const { l, locale } = useI18n();
|
||||
const route = useRoute()
|
||||
const checkimg = ref('https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp')
|
||||
const imgBigRect = ref({ h: 50, w: 50, l: 51, t: 0 })
|
||||
const count = ref(1)
|
||||
const collectImg = ref("/img/details/heart_null.png")
|
||||
const commentContent = ref("")
|
||||
|
||||
// 方法
|
||||
const changetype = function () {
|
||||
let element = document.getElementsByClassName('exzoom_span')
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
element[i].addEventListener('mouseenter', function () {
|
||||
for (let s = 0; s < element.length; s++) {
|
||||
element[s].classList.remove('current')
|
||||
|
||||
}
|
||||
element[i].classList.add('current')
|
||||
count.value = i + 1;
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
});
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
const exzoo_click = function (val) {
|
||||
|
||||
if (val == 1) {
|
||||
|
||||
if (count.value == detail_list_img.value.length) {
|
||||
count.value = 1
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
// console.log(checkimg.value);
|
||||
count.value++
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
} else {
|
||||
|
||||
if (count.value <= 1) {
|
||||
count.value = detail_list_img.value.length
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
count.value--
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
|
||||
// 点击收藏
|
||||
const handleCollect = function () {
|
||||
if (dataDetail.value.is_collect == false) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
dataDetail.value.is_collect = true
|
||||
ElMessage({
|
||||
message: '收藏成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
dataDetail.value.is_collect = false
|
||||
ElMessage({
|
||||
message: '取消收藏',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化收藏状态
|
||||
const setCollect = function () {
|
||||
if (dataDetail.value.is_collect == true) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
}
|
||||
}
|
||||
|
||||
// 访问其他网站
|
||||
const redirectToAnotherProject = function (url) {
|
||||
const returnUrl = window.location.href;
|
||||
// window.open = url + '?returnUrl=' + encodeURIComponent(returnUrl);//本页面打开
|
||||
window.open(url);//新标签打开
|
||||
}
|
||||
|
||||
// 发送评论
|
||||
const handleSendComment = function () {
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
|
||||
setCollect()
|
||||
})
|
||||
|
||||
|
||||
|
||||
// --- 接口对接 ---
|
||||
// 获取新闻详情
|
||||
// useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
|
||||
// dataDetail.value = JSON.parse(res.data.value).data
|
||||
// })
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).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/list/list_details/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/list_details/media.scss"></style>
|
||||
367
pages/software/[idx]-[page].vue
Normal file
367
pages/software/[idx]-[page].vue
Normal file
@ -0,0 +1,367 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<Poster :type=2></Poster>
|
||||
|
||||
<div class="background_box">
|
||||
|
||||
<main class="container font-size-box">
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-big-box">
|
||||
<div class="search-box">
|
||||
<!-- <el-select class="search-select" v-model="queryParams.categoryId" placeholder="请选择"
|
||||
style="width: 90px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
<div class="searchBox">
|
||||
|
||||
<input v-model="queryParams.search" class="searchInput" type="text" name=""
|
||||
placeholder="开启精彩搜索" @keydown="keyDownEvent">
|
||||
<button class="searchButton" href="#" @click="handleSearch">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29"
|
||||
fill="none">
|
||||
<g clip-path="url(#clip0_2_17)">
|
||||
<g filter="url(#filter0_d_2_17)">
|
||||
<path
|
||||
d="M23.7953 23.9182L19.0585 19.1814M19.0585 19.1814C19.8188 18.4211 20.4219 17.5185 20.8333 16.5251C21.2448 15.5318 21.4566 14.4671 21.4566 13.3919C21.4566 12.3167 21.2448 11.252 20.8333 10.2587C20.4219 9.2653 19.8188 8.36271 19.0585 7.60242C18.2982 6.84214 17.3956 6.23905 16.4022 5.82759C15.4089 5.41612 14.3442 5.20435 13.269 5.20435C12.1938 5.20435 11.1291 5.41612 10.1358 5.82759C9.1424 6.23905 8.23981 6.84214 7.47953 7.60242C5.94407 9.13789 5.08145 11.2204 5.08145 13.3919C5.08145 15.5634 5.94407 17.6459 7.47953 19.1814C9.01499 20.7168 11.0975 21.5794 13.269 21.5794C15.4405 21.5794 17.523 20.7168 19.0585 19.1814Z"
|
||||
stroke="white" stroke-width="3" stroke-linecap="round"
|
||||
stroke-linejoin="round" shape-rendering="crispEdges"></path>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2_17" x="-0.418549" y="3.70435" width="29.7139"
|
||||
height="29.7139" filterUnits="userSpaceOnUse"
|
||||
color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha">
|
||||
</feColorMatrix>
|
||||
<feOffset dy="4"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2"></feGaussianBlur>
|
||||
<feComposite in2="hardAlpha" operator="out"></feComposite>
|
||||
<feColorMatrix type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix"
|
||||
result="effect1_dropShadow_2_17"></feBlend>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_17"
|
||||
result="shape"></feBlend>
|
||||
</filter>
|
||||
<clipPath id="clip0_2_17">
|
||||
<rect width="28.0702" height="28.0702" fill="white"
|
||||
transform="translate(0.403503 0.526367)"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 分类 -->
|
||||
<div class="category-big-box">
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">分类</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
||||
@click="toggleActive(index)" v-for="(item, index) in typeList">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-box" v-if="typeChildrenList.length !== 0">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">二级分类</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
||||
@click="toggleChildActive(index)" v-for="(item, index) in typeChildrenList">{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-line"></div>
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">排序</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item sort" @click="handleSort(1)">
|
||||
<span>最新</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(2)">
|
||||
<span>推荐</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(3)">
|
||||
<span>下载</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(4)">
|
||||
<span>浏览</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 模块渲染列表 -->
|
||||
<div v-if="dataList.length != 0" class="content-big-box animate__animated animate__fadeIn">
|
||||
<div class="row content-list-box">
|
||||
|
||||
<nuxt-link v-for="(item, index) in dataList" :to="getHerf(getLink(item))"
|
||||
class="col-lg-3 col-md-6 col-sm-6 col-xs-6 jump">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_none" v-else>
|
||||
</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>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 预对接
|
||||
let dataList = ref([
|
||||
{
|
||||
id: 1,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
])
|
||||
let typeList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "全部",
|
||||
isActive: true
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "三渲二",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "交通工具",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "武器兵刃",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
])
|
||||
let typeChildrenList = ref([
|
||||
])
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
let active = reactive({ idx: Number(route.params.idx), name: typeList.value[0] })
|
||||
|
||||
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,
|
||||
locale: locale.value,
|
||||
limit: 10,
|
||||
search: ""
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
const routerJump = function () {
|
||||
let { page } = queryParams
|
||||
router.push("1-" + String(page))
|
||||
}
|
||||
|
||||
const getLink = function (item) {
|
||||
if (item?.link) {
|
||||
return item?.link;
|
||||
} else {
|
||||
return "/model/details/" + item.id;
|
||||
}
|
||||
}
|
||||
|
||||
let url = getHerf('/search/0-1?s=')
|
||||
const handleSearch = function(){
|
||||
router.push(url + queryParams.search)
|
||||
}
|
||||
|
||||
const keyDownEvent = $event => {
|
||||
$event.keyCode === 13 && (router.push(url + queryParams.search))
|
||||
}
|
||||
|
||||
// 切换激活状态的方法
|
||||
const toggleActive = (index) => {
|
||||
typeList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
// 切换子类激活状态的方法
|
||||
const toggleChildActive = (index) => {
|
||||
typeChildrenList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeChildrenList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
const handleSort = (type) => {
|
||||
console.log(type);
|
||||
}
|
||||
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
|
||||
// 获取新闻类型列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
||||
// total.value = JSON.parse(res.data.value).count || 0
|
||||
// res.unshift({
|
||||
// href: '/project/project/0-1',
|
||||
// name: t('home.products.all')
|
||||
// })
|
||||
// newsList.value = JSON.parse(res.data.value).data || []
|
||||
// })
|
||||
|
||||
|
||||
// 获取新闻列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).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 } })
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 2,
|
||||
})
|
||||
htmlAddAnimations()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/list/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/media.scss"></style>
|
||||
396
pages/software/details/[id].vue
Normal file
396
pages/software/details/[id].vue
Normal file
@ -0,0 +1,396 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ dataDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
|
||||
<Header></Header>
|
||||
|
||||
<div class="container details-pos-box">
|
||||
|
||||
<div class="details-big-box row">
|
||||
|
||||
<!-- 左边 -->
|
||||
<div class="details-left-box col-lg-8 col-md-6 col-sm-12">
|
||||
<div class="preview-box">
|
||||
<Magnify :imgSrc='checkimg' :imgBigSrc='checkimg' :imgBigRect='imgBigRect' rate="200">
|
||||
</Magnify>
|
||||
<div class="exzoom">
|
||||
<div class="exzoom_nav">
|
||||
<p class="exzoom_nav_inner">
|
||||
<span v-for="(item, i) in detail_list_img" :key="i" @mouseenter="changetype">
|
||||
<span :class="count - 1 == i ? 'exzoom_span current' : 'exzoom_span'">
|
||||
<img :src="item" width="60">
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="exzoom_btn">
|
||||
<a href="javascript:void(0);" class="exzoom_prev_btn" @click="exzoo_click(0)">
|
||||
<el-icon>
|
||||
<Back />
|
||||
</el-icon>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="exzoom_next_btn" @click="exzoo_click(1)">
|
||||
<el-icon>
|
||||
<Right />
|
||||
</el-icon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div clas="left-detail-pos-box">
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">简介</div>
|
||||
<div class="left-detail-content">{{ dataDetail.intro }}</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="left-detail-box">
|
||||
<div class="left-detail-title">描述</div>
|
||||
<div class="left-detail-content" v-html="dataDetail.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右边边 -->
|
||||
<div class="details-right-box col-lg-4 col-md-6 col-sm-12">
|
||||
<h1 class="details-title">Horse Animset Pro (Riding System)</h1>
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-content-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<div class="content-category">{{ dataDetail.categoty_name }}</div>
|
||||
</div>
|
||||
<div class="content-rate-line">|</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<StarFilled />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">({{ dataDetail.collect_num }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-price">{{ dataDetail.price ? 0 : "免费" }}</div>
|
||||
<div class="content-line"></div>
|
||||
<div class="content-rate-icon-box detail-icon-box">
|
||||
<el-icon class="content-rate-icon detail-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num detail-rate-text">{{ dataDetail.view_num }} 浏览量</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="play-btn-box">
|
||||
<button class="play-btn">
|
||||
<div class="btn-text">P L A Y</div>
|
||||
<div id="clip">
|
||||
<div id="leftTop" class="corner"></div>
|
||||
<div id="rightBottom" class="corner"></div>
|
||||
<div id="rightTop" class="corner"></div>
|
||||
<div id="leftBottom" class="corner"></div>
|
||||
</div>
|
||||
<span id="rightArrow" class="arrow"></span>
|
||||
<span id="leftArrow" class="arrow"></span>
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<div class="btn-box">
|
||||
<button class="btn" @click="redirectToAnotherProject(dataDetail.download_link)">下载工程</button>
|
||||
<div class="btn-collect">
|
||||
<img @click="handleCollect" :src=collectImg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child"
|
||||
@click="redirectToAnotherProject(dataDetail.material_link)">下载资源</button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="btn btn-child" @click="redirectToAnotherProject(dataDetail.note_link)">查看笔记</button>
|
||||
</div>
|
||||
|
||||
<div class="right-detail-intro-pos-box">
|
||||
<div class="content-line"></div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">文件大小</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.flie_size }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">发布日期</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.send_time }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">Unity 版本</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.unity_version }}</div>
|
||||
</div>
|
||||
<div class="rightd-detail-intro-box">
|
||||
<div class="rightd-detail-intro-title">URP 支持</div>
|
||||
<div class="rightd-detail-intro-content">{{ dataDetail.is_urp ? '支持' : '不支持' }}</div>
|
||||
</div>
|
||||
<div class="Instructions">仅供交流学习研究使用，版权归原作者所有，禁止商业使用。【如有侵权请联系删除】</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="content-line"></div> -->
|
||||
|
||||
<!-- 评论 -->
|
||||
<div class="right-comment-pos-box">
|
||||
<div class="left-detail-title">评论</div>
|
||||
|
||||
<div class="right-comment-input-box">
|
||||
<div class="content-comment-user-img-box">
|
||||
<el-avatar class="content-comment-user-img" :size="50" :src=dataDetail.user_img />
|
||||
<div class="content-user-name f1">{{ dataDetail.user_name }}</div>
|
||||
</div>
|
||||
|
||||
<div class="comment-input-box">
|
||||
<el-input v-model="commentContent" :rows="3" type="textarea" placeholder="欢迎您留下宝贵的见解！" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-btn">
|
||||
<el-button type="primary" @click="handleSendComment">发送评论</el-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-for="item in dataDetail.comment_list">
|
||||
<div class="custom-comment-big-box">
|
||||
<div class="custom-comment-avatar">
|
||||
<el-avatar class="content-comment-user-img" :size="45" :src=item.user_img />
|
||||
</div>
|
||||
<div class="custom-comment-content-box">
|
||||
<div class="custom-comment-content-user-name">{{ item.user_name }}</div>
|
||||
<div class="custom-comment-content-text">{{ item.comment_content }}</div>
|
||||
<div class="custom-comment-content-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-line"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class="details-pos-box">
|
||||
<div class="details-title-box">
|
||||
<div class="details-title"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<Final></Final>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { View } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// 预对接
|
||||
let dataDetail = ref({
|
||||
id: 1,
|
||||
title: "Horse Animset Pro (Riding System)",
|
||||
user_id: 1,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
collect_num: 3086,
|
||||
view_num: 506,
|
||||
categoty_name: "模型 > 动物",
|
||||
price: 0,
|
||||
download_link: "https://drive.aerwen.net/d/aerwen/unity%E6%BA%90%E7%A0%81/Class/%E9%A1%BA%E8%81%8C%E5%AD%A6%E4%B9%A0%E9%80%9A%E8%AF%BE%E7%A8%8B/%E7%BB%93%E8%AF%BE/9%E4%BB%BB%E5%8A%A1%EF%BC%9A%E5%88%86%E6%95%B0%E7%BB%9F%E8%AE%A1.unitypackage",
|
||||
material_link: "",
|
||||
note_link: "https://blog.csdn.net/weixin_60435181/article/details/139512841?spm=1001.2014.3001.5501",
|
||||
is_collect: false,
|
||||
is_urp: false,
|
||||
flie_size: "8.2MB",
|
||||
send_time: "2024-03-01",
|
||||
unity_version: "2019.4.23或更高",
|
||||
comment_list: [
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://thirdqq.qlogo.cn/ek_qqapp/AQIMauLMSKSQoxA7pKYDZXYRTtVrZrOjiarOroKgySzPZibMamTMEfys5XN3vCQwRQzCajRylXORhbmTSDZCTIV0djV5ybY2dOF0cqxYQzgicmQ7pXFLXs/100",
|
||||
user_name: "hqbb",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "大佬牛逼！",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "123",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "测试",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
{
|
||||
user_id: 1,
|
||||
user_img: "https://blender.kim/wp-content/themes/zibll/img/avatar-default.png",
|
||||
user_name: "music键",
|
||||
send_time: "2024-03-03",
|
||||
comment_content: "6666",
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
intro: "Riding System using the Animal Controller to make your character Ride any creature",
|
||||
content: "<p><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>✅✅升级至 4.2+ ✅✅<br></strong></span></p><p style=\"text-align: start;\">已移除大量脚本，所以为了顺利升级，请遵循以下步骤：</p><p style=\"text-align: start;\">1- 移除 [Malbers Animation\\Common] 文件夹</p><p style=\"text-align: start;\">2- 将 [Horse Animset Pro 4.2+] 再次导入项目<br><a href=\"https://malbersanimations.gitbook.io/animal-controller/quickstart/upgrading-to-ac-1.2-hap-4.2\" target=\"_blank\" style=\"text-align: start;\">升级过程中的常见问题 (AC)</a><br><br><br></p><p style=\"text-align: start;\">这就是你的终极骑行系统！<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>高质量的动画<br></strong></span></p><p style=\"text-align: start;\">Horse AnimSet Pro(HAP) 是一套动画框架和骑行系统控制器，基于根运动，适合于任何人形角色。该资源开始时就像是一个简单的马模型和动画包，但经过不断发展，它已经成为一套强大而灵活的骑行控制器。它包括一个来自于标准资源的基础角色控制器，但可以与你创建的更高级的角色控制器搭配使用，也可以与商店中任何让人惊叹的角色控制器（TCP 或 FPC）搭配使用。</p><p style=\"text-align: start;\">该资源包在不断扩展，每次更新都推出了更多功能和动画效果！<br></p><p style=\"text-align: start;\"><a href=\"http://bit.ly/HAPIntegrations\" target=\"_blank\">集成</a> | <a href=\"http://bit.ly/2DuntpT\" target=\"_blank\">骑上任何生物</a> | <a href=\"http://bit.ly/HorseWebGL\" target=\"_blank\">网络演示</a> | <a href=\"http://goo.gl/BLTI4t\" target=\"_blank\">论坛</a> | <a href=\"http://bit.ly/MalbersHAPDoc\" target=\"_blank\">手册<br><br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><strong>⚙ 功能 ⚙<br></strong></span></a></p><p style=\"text-align: start;\">马：</p><p style=\"text-align: start;\">- 80 个动画剪辑</p><p style=\"text-align: start;\">- 2 种马的风格（现实、多边形艺术）</p><p style=\"text-align: start;\">- 针对每种马的风格提供多种纹理集合</p><p style=\"text-align: start;\">- LOD</p><p style=\"text-align: start;\">- 盔甲、缰绳和马鞍</p><p style=\"text-align: start;\">- 针对缰绳和马鬃的 Unity 布料模拟不能用于 Unity 2019</p><p style=\"text-align: start;\">- 声音</p><p style=\"text-align: start;\">- 基础脚步系统（足迹声音和足迹粒子）</p><p style=\"text-align: start;\">- 用于管理所有 Malbers Animations 生物的动物控制器</p><p style=\"text-align: start;\">- 状态：游泳、摔倒、跳跃、攻击、死亡、行走、小跑、慢跑、疾驰、冲刺</p><p style=\"text-align: start;\">- 定向伤害系统</p><p style=\"text-align: start;\">- 扫射</p><p style=\"text-align: start;\">- 镜头基础输入</p><p style=\"text-align: start;\">- 地形校正</p><p style=\"text-align: start;\">- 支持 NavMesh Agent。基础 AI</p><p style=\"text-align: start;\">- 移动端友好</p><p style=\"text-align: start;\">骑行者：</p><p style=\"text-align: start;\">- 132 个动画剪辑（可用于人形角色设定，以获得更好的兼容性）</p><p style=\"text-align: start;\">- 附带 1 个纹理集合的牛仔模型</p><p style=\"text-align: start;\">- 骑行者系统（TCP 和 FPC）</p><p style=\"text-align: start;\">- 骑行者战斗系统：弓箭、手枪、混战（即将推出长矛、步枪、魔法物品、投掷物）</p><p style=\"text-align: start;\">- 非常非常基础的库存系统，用以演示骑行者 - 战斗系统与外部库存的兼容性。</p><p style=\"text-align: start;\">实用工具：</p><p style=\"text-align: start;\">- 材料更换器</p><p style=\"text-align: start;\">- 混合形状管理器</p><p style=\"text-align: start;\">- 网格更换器</p><p style=\"text-align: start;\">- 动画器消息行为</p><p style=\"text-align: start;\">- 动画器声音行为</p><p style=\"text-align: start;\">- 头部瞄准</p><p style=\"text-align: start;\">- 武器（模型、纹理和脚本）</p><p style=\"text-align: start;\">- 动物基础 AI</p><p style=\"text-align: start;\">- 带镜头状态的基础镜头设置系统。</p><p style=\"text-align: start;\">- 兼容所有 Malbers 动物<br><span style=\"color: rgb(33, 33, 33); background-color: rgb(255, 255, 255); font-size: 16px;\"><em>- 兼容 Invector TCP、Ootii MC，即将推出更多集成！未来更新<br></em></span></p><p style=\"text-align: start;\">联系人：<a href=\"mailto:malbers.shark87@gmail.com\" target=\"_blank\">malbers.shark87@gmail.com</a></p><p style=\"text-align: start;\">查看日志以了解版本变化</p><p style=\"text-align: start;\"><br></p><p style=\"text-align: start;\"><br></p>"
|
||||
})
|
||||
let detail_list_img = ref([
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/0f73facc-8e8c-4b94-8de3-67ca8386f5ac.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/1cc96654-37ad-4b7f-ae1b-0dead9d9fd76.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
"https://assetstore-cdn-china-v1.unitychina.cn/package-screenshot/57f984e4-94b7-4bac-bb56-10ee96bf03a2.webp",
|
||||
])
|
||||
|
||||
// 参数
|
||||
const { l, locale } = useI18n();
|
||||
const route = useRoute()
|
||||
const checkimg = ref('https://assetstore-cdn-china-v1.unitychina.cn/key-image/b7ede01a-3ccc-4155-9383-33a6976056c1.webp')
|
||||
const imgBigRect = ref({ h: 50, w: 50, l: 51, t: 0 })
|
||||
const count = ref(1)
|
||||
const collectImg = ref("/img/details/heart_null.png")
|
||||
const commentContent = ref("")
|
||||
|
||||
// 方法
|
||||
const changetype = function () {
|
||||
let element = document.getElementsByClassName('exzoom_span')
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
element[i].addEventListener('mouseenter', function () {
|
||||
for (let s = 0; s < element.length; s++) {
|
||||
element[s].classList.remove('current')
|
||||
|
||||
}
|
||||
element[i].classList.add('current')
|
||||
count.value = i + 1;
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
});
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
const exzoo_click = function (val) {
|
||||
|
||||
if (val == 1) {
|
||||
|
||||
if (count.value == detail_list_img.value.length) {
|
||||
count.value = 1
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
// console.log(checkimg.value);
|
||||
count.value++
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
} else {
|
||||
|
||||
if (count.value <= 1) {
|
||||
count.value = detail_list_img.value.length
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
} else {
|
||||
count.value--
|
||||
checkimg.value = detail_list_img.value[count.value - 1]
|
||||
}
|
||||
}
|
||||
console.log(checkimg.value);
|
||||
}
|
||||
|
||||
|
||||
// 点击收藏
|
||||
const handleCollect = function () {
|
||||
if (dataDetail.value.is_collect == false) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
dataDetail.value.is_collect = true
|
||||
ElMessage({
|
||||
message: '收藏成功！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
dataDetail.value.is_collect = false
|
||||
ElMessage({
|
||||
message: '取消收藏',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化收藏状态
|
||||
const setCollect = function () {
|
||||
if (dataDetail.value.is_collect == true) {
|
||||
collectImg.value = "/img/details/heart_full.png"
|
||||
}
|
||||
else {
|
||||
collectImg.value = "/img/details/heart_null.png"
|
||||
}
|
||||
}
|
||||
|
||||
// 访问其他网站
|
||||
const redirectToAnotherProject = function (url) {
|
||||
const returnUrl = window.location.href;
|
||||
// window.open = url + '?returnUrl=' + encodeURIComponent(returnUrl);//本页面打开
|
||||
window.open(url);//新标签打开
|
||||
}
|
||||
|
||||
// 发送评论
|
||||
const handleSendComment = function () {
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
|
||||
setCollect()
|
||||
})
|
||||
|
||||
|
||||
|
||||
// --- 接口对接 ---
|
||||
// 获取新闻详情
|
||||
// useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
|
||||
// dataDetail.value = JSON.parse(res.data.value).data
|
||||
// })
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).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/list/list_details/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/list_details/media.scss"></style>
|
||||
BIN
public/img/details/heart_full.png
Normal file
BIN
public/img/details/heart_full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
public/img/details/heart_null.png
Normal file
BIN
public/img/details/heart_null.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Loading…
Reference in New Issue
Block a user