generated from nuxt/nuxt_site
396 lines
21 KiB
Vue
396 lines
21 KiB
Vue
<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> |