|
@@ -0,0 +1,257 @@
|
|
|
+<template>
|
|
|
+ <div class="relics-appr">
|
|
|
+ <div class="top-bar">
|
|
|
+ <div class="left-wrap">
|
|
|
+ <button
|
|
|
+ class="switch-3d"
|
|
|
+ :class="currentDim === 3 ? 'choosen' : ''"
|
|
|
+ @click="currentDim = 3"
|
|
|
+ >
|
|
|
+ 三维文物
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="switch-2d"
|
|
|
+ :class="currentDim === 2 ? 'choosen' : ''"
|
|
|
+ @click="currentDim = 2"
|
|
|
+ >
|
|
|
+ 二维文物
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="search-or-input">
|
|
|
+ <div
|
|
|
+ v-if="!isShowInput"
|
|
|
+ class="search-wrap"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-click-outside.click="onClickOutside"
|
|
|
+ class="select-wrap"
|
|
|
+ @click="isShowSelections = !isShowSelections"
|
|
|
+ >
|
|
|
+ <div class="select">
|
|
|
+ {{ typeList[currentTypeIdx].name }}
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ src="@/assets/images/expand.png"
|
|
|
+ alt="展开"
|
|
|
+ class="expand-icon"
|
|
|
+ :class="{
|
|
|
+ expanded: isShowSelections,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ class="begin-input"
|
|
|
+ @click="isShowInput = true"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="@/assets/images/search.png"
|
|
|
+ alt="搜索"
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ <ul
|
|
|
+ v-show="isShowSelections"
|
|
|
+ class="selection-wrap"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in typeList"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{
|
|
|
+ choosen: currentTypeIdx === index,
|
|
|
+ }"
|
|
|
+ @click="currentTypeIdx = index"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="isShowInput"
|
|
|
+ class="input-wrap"
|
|
|
+ >
|
|
|
+ <button class="search">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/search.png"
|
|
|
+ alt="搜索"
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ <input type="text">
|
|
|
+ <button
|
|
|
+ class="cancel"
|
|
|
+ @click="isShowInput = false"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentDim: 3,
|
|
|
+ typeList: [
|
|
|
+ {
|
|
|
+ name: '全部',
|
|
|
+ id: 'all',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '手稿',
|
|
|
+ id: 'script',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '书刊',
|
|
|
+ id: 'book',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '用具',
|
|
|
+ id: 'tool',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '服装',
|
|
|
+ id: 'clothes',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ currentTypeIdx: 0,
|
|
|
+ isShowSelections: false,
|
|
|
+ isShowInput: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onClickOutside() {
|
|
|
+ this.isShowSelections = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.relics-appr {
|
|
|
+ // position: relative;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-image: url(@/assets/images/relics-background.png);
|
|
|
+ background-size: cover;
|
|
|
+ padding-left: 1.67rem;
|
|
|
+ padding-right: 1.67rem;
|
|
|
+ .top-bar {
|
|
|
+ position: fixed;
|
|
|
+ top: 3.17rem;
|
|
|
+ left: 1.67rem;
|
|
|
+ right: 1.67rem;
|
|
|
+ height: 4.17rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left-wrap {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ gap: 0.83rem;
|
|
|
+ > button {
|
|
|
+ height: 100%;
|
|
|
+ width: 9.58rem;
|
|
|
+ border-radius: 2.08rem;
|
|
|
+ border: 0.08rem solid #930909;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #666666;
|
|
|
+ &.choosen {
|
|
|
+ color: #D8B275;
|
|
|
+ background: #930909;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-or-input {
|
|
|
+ width: 19.58rem;
|
|
|
+ height: 100%;
|
|
|
+ background: #930909;
|
|
|
+ border-radius: 2.08rem;
|
|
|
+ padding: 0 1.21rem;
|
|
|
+ > .search-wrap {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ > .select-wrap {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > .select {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 1.67rem;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ margin-left: 0.54rem;
|
|
|
+ margin-right: 0.54rem;
|
|
|
+ width: 1.23rem;
|
|
|
+ &.expanded {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > button.begin-input {
|
|
|
+ height: 100%;
|
|
|
+ flex: 1 0 1px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ > img {
|
|
|
+ width: 2.24rem;
|
|
|
+ height: 2.08rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > ul {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: calc(1rem + 100%);
|
|
|
+ width: 11.67rem;
|
|
|
+ height: 20rem;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 0.42rem 0.42rem 0.42rem 0.42rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ > li {
|
|
|
+ color: #666;
|
|
|
+ font-size: 1.67rem;
|
|
|
+ &.choosen {
|
|
|
+ color: #930909;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .input-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ .search {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ width: 2.24rem;
|
|
|
+ height: 2.08rem;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ flex: 1 0 auto;
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .cancel {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ color: #D8BF7C;
|
|
|
+ font-size: 1.67rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|