Skip to content

E
exhibition_page
提交 041fddb7 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

完善3D

上级 516be8ef
隐藏空白字符变更
内嵌 并排
正在显示 包含 111 行增加 和 42 行删除
src/App.vue
浏览文件 @ 041fddb7
......@@ -19,7 +19,7 @@ export default {
data() {
return {
headerFixed: false,
whiteList: ["3d"], //不需要nav或者footer的路由页面
whiteList: [""], //不需要nav或者footer的路由页面
};
},
mounted() {
......
src/assets/imgs/3d/full-bg.png 0 → 100644
浏览文件 @ 041fddb7
差异被折叠。
src/assets/imgs/line-draft/4.png 0 → 100644
浏览文件 @ 041fddb7
差异被折叠。
src/assets/styles/variable.scss
浏览文件 @ 041fddb7
$deep-blue: #252F57; //主题深蓝
$blue: #2365D3; //
$yellow: #dfab46; //辅色黄色，用于高亮，选中菜单等
$pu-hui-ti: "Alibaba-pu-hui-ti"; //阿里巴巴普惠体
$siyuan-song-bold: "SourceHanSerifCN-Bold"; //思源宋体加粗
$deep-blue: #252F57;//主题深蓝
$yellow: #dfab46;//辅色黄色，用于高亮，选中菜单等
$pu-hui-ti: "Alibaba-pu-hui-ti";//阿里巴巴普惠体
$siyuan-song-bold: "SourceHanSerifCN-Bold";//思源宋体加粗
$font-size-sm: 14px; //小号字体
$font-size-base: 16px; //普通字体
$font-size-lg: 22px; //大号字体
$font-size-sm: 14px;//小号字体
$font-size-base: 16px;//普通字体
$font-size-lg: 22px;//大号字体
$nav-height: 120px; //导航高度
$nav-height: 120px;//导航高度
$default-font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;//默认字体
\ No newline at end of file
$default-font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; //默认字体
\ No newline at end of file
src/icons/svg/right.svg 0 → 100644
浏览文件 @ 041fddb7
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696831414984" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2842" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M512 1008.64c-131.072 0-254.976-51.2-348.16-142.336-12.288-12.288-12.288-31.744 0-43.008 12.288-12.288 31.744-12.288 43.008 0 81.92 80.896 190.464 124.928 305.152 124.928 239.616 0 435.2-195.584 435.2-435.2S751.616 76.8 512 76.8 76.8 272.384 76.8 512c0 17.408-13.312 30.72-30.72 30.72s-30.72-13.312-30.72-30.72C15.36 238.592 238.592 15.36 512 15.36S1008.64 238.592 1008.64 512 785.408 1008.64 512 1008.64z" p-id="2843"></path><path d="M746.496 490.496 588.8 332.8c-12.288-12.288-31.744-12.288-43.008 0-12.288 12.288-12.288 31.744 0 43.008L650.24 481.28 299.008 481.28c-17.408 0-30.72 13.312-30.72 30.72 0 17.408 13.312 30.72 30.72 30.72l351.232 0L545.792 648.192c-12.288 12.288-12.288 31.744 0 43.008 6.144 6.144 14.336 9.216 21.504 9.216s15.36-3.072 21.504-9.216l157.696-157.696c6.144-6.144 9.216-13.312 9.216-21.504S752.64 495.616 746.496 490.496z" p-id="2844"></path></svg>
\ No newline at end of file
src/views/3d/index.vue
浏览文件 @ 041fddb7
<template>
<div class="dialog-container">
<div class="box">
<div class="three">
<div class="poster">
<div class="comon-title">
<div class="ch">三维展示</div>
<div class="en">
<span>3D display</span>
<svg-icon icon-class="right"></svg-icon>
</div>
</div>
<div class="imgs">
<div class="crs">
<div class="left">
<div class="common-bg-name">
<div class="icon">
<img :src="Icon3D" />
</div>
<div class="name">清琥珀长命锁</div>
</div>
<img :src="leftImg" />
</div>
<div class="center"></div>
<div class="right">
<div class="common-bg-name">
<div class="icon">
<img :src="Icon3D" />
</div>
<div class="name">斗彩山水人物盖碗</div>
</div>
<img :src="rightImg" />
</div>
</div>
<div class="crs"></div>
</div>
</div>
<div class="list">
<div class="comon-title">
<div class="ch">三维列表</div>
<div class="en">
<span>3D list</span>
<svg-icon icon-class="right"></svg-icon>
</div>
</div>
</div>
<!-- <div class="box">
<Viewer3d backgroundcolor="0, 0, 0,40%" />
<div class="close">
<i class="el-icon-close"></i>
</div>
</div>
</div> -->
</div>
</template>
<script>
import Viewer3d from "@/components/Viewer3d";
// import Viewer3d from "@/components/Viewer3d";
export default {
components: { Viewer3d },
// components: { Viewer3d },
data() {
return {
title: "",
Icon3D: require("@/assets/imgs/3d/circle.png"),
leftImg: require("@/assets/imgs/3d/2.png"),
rightImg: require("@/assets/imgs/3d/4.png"),
centerImg: require("@/assets/imgs/3d/1.png"),
leftLineDraft: require("@/assets/imgs/line-draft/6.png"),
rightLineDraft: require("@/assets/imgs/line-draft/3.png"),
};
},
methods: {
handleClose() {
this.dialogVisible = false;
},
},
methods: {},
};
</script>
<style lang="scss" scoped>
.dialog-container {
// background-color: #000;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.comon-title {
color: #fff;
font-family: $siyuan-song-bold;
.ch,
.en {
display: flex;
justify-content: center;
}
.ch {
font-size: 18px;
}
.en {
font-size: 14px;
align-items: center;
.svg-icon {
margin-left: 8px;
}
}
}
.box {
height: 100%;
width: 100%;
// background-color: rgba($color: #000000, $alpha: 0.4);
position: relative;
.close {
position: absolute;
right: -50px;
top: -100px;
.common-bg-name{
.icon{
width: 40px;
height: 40px;
img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
.name{
background-color: $deep-blue;
width: 40px;
padding: 10px;
border: 1px solid #fff;
color: #fff;
border-radius: 50%;
}
}
.three {
min-height: 1000px !important;
width: 100%;
background-image: url(@/assets/imgs/3d/full-bg.png);
background-size: cover;
}
.poster,
.list {
padding: 100px 0;
}
</style>
src/views/searchPic/index.vue
浏览文件 @ 041fddb7
......@@ -126,7 +126,7 @@ $transition-ease-03s: all ease 0.3s;
height: 150%;
width: 700px;
background-size: contain;
background-image: url("@/assets/imgs/search-pic/6.png");
background-image: url("@/assets/imgs/line-draft/6.png");
background-repeat: no-repeat;
z-index: 0;
}
......@@ -137,7 +137,7 @@ $transition-ease-03s: all ease 0.3s;
height: 80%;
width: 400px;
background-size: contain;
background-image: url("@/assets/imgs/search-pic/3.png");
background-image: url("@/assets/imgs/line-draft/3.png");
background-repeat: no-repeat;
z-index: 0;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论