|
|
@@ -2,19 +2,21 @@
|
|
|
<section class="layout-bottom">
|
|
|
<CapitalInfo class="capital-info-container"></CapitalInfo>
|
|
|
<main>
|
|
|
+ <div class="conditionIcon icon iconfont icon-shouqi"></div>
|
|
|
<firstMenu :list="list"
|
|
|
:value="'value'"
|
|
|
@selectMenu="selectMenu" />
|
|
|
<quoteTable :columns="columns"
|
|
|
:dataSource="data"
|
|
|
/>
|
|
|
- <!-- <thirdMenu></thirdMenu> -->
|
|
|
+ <thirdMenu></thirdMenu>
|
|
|
</main>
|
|
|
</section>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { defineComponent } from 'vue';
|
|
|
import CapitalInfo from '@/components/capitalInfo/index.vue';
|
|
|
+import firstMenu from '@/components/firstMenu/index.vue';
|
|
|
import thirdMenu from '@/components/thirdMenu/index.vue';
|
|
|
import quoteTable from '@/components/quoteTable/index.vue';
|
|
|
import { MenuItem } from '@/components/contextMenu/interface';
|
|
|
@@ -71,8 +73,9 @@ export default defineComponent({
|
|
|
name: 'layout-top',
|
|
|
components: {
|
|
|
CapitalInfo,
|
|
|
- thirdMenu,
|
|
|
- quoteTable
|
|
|
+ firstMenu,
|
|
|
+ quoteTable,
|
|
|
+ thirdMenu
|
|
|
},
|
|
|
setup() {
|
|
|
const { list, selectMenu } = handleMenu();
|
|
|
@@ -88,12 +91,31 @@ export default defineComponent({
|
|
|
<style lang="less">
|
|
|
.layout-bottom {
|
|
|
display: flex;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
.capital-info-container {
|
|
|
width: 180px;
|
|
|
}
|
|
|
main {
|
|
|
+ max-width: calc(100% - 180px);
|
|
|
flex: 1;
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
background: rgb(14, 14, 15);
|
|
|
+ position: relative;
|
|
|
+ .conditionIcon {
|
|
|
+ font-size: 16px;
|
|
|
+ color: @m-grey1;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ .position(absolute, 8px, 14px, auto, auto);
|
|
|
+ z-index: 2;
|
|
|
+ &:hover {
|
|
|
+ color: rgba(@m-grey1, .8);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|