115 lines
2.8 KiB
Vue
115 lines
2.8 KiB
Vue
<template>
|
|
<div class="about-wrapper" :style="aboutWrapper">
|
|
<div class="usermanual">
|
|
<h2>{{ t('usermanual') }}</h2>
|
|
<div class="usermanual-item">
|
|
<div><span class="iconfont icon-single-click"/> + <span class="iconfont icon-mouse"/></div>
|
|
<div>{{ t('usermanual.move-view') }}</div>
|
|
</div>
|
|
<div class="usermanual-item">
|
|
<div><span class="iconfont icon-wheel-change"/></div>
|
|
<div>{{ t('usermanual.scale-view') }}</div>
|
|
</div>
|
|
<div class="usermanual-item">
|
|
<div><span class="iconfont icon-ctrl"/> + <span class="iconfont icon-wheel-change"/></div>
|
|
<div>{{ t('usermanual.scale-view') }}+</div>
|
|
</div>
|
|
<div class="usermanual-item">
|
|
<div><span class="iconfont icon-double-click"/></div>
|
|
<div>{{ t('usermanual.scale-view') }}+</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<hr>
|
|
<br>
|
|
|
|
<div class="icon-caption" @click="goto('https://github.com/Digital-EDA')">
|
|
<div class="digital-ide-icon big"/>
|
|
</div>
|
|
<div class="version-caption">
|
|
<span>{{ t('current-version') }}   <span class="version-wrapper">0.4.0</span></span>
|
|
</div>
|
|
<br>
|
|
<div style="display: flex;justify-content: space-around;">
|
|
<div class="copyright-caption" v-html="t('copyright')"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { defineComponent, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { horizontalResizer } from '../right-nav';
|
|
|
|
defineComponent({ name: 'dide-about' });
|
|
|
|
function goto(url) {
|
|
window.open(url, '_blank');
|
|
}
|
|
|
|
const aboutWrapper = computed(() => ({
|
|
width: horizontalResizer.width - 10 + 'px'
|
|
}));
|
|
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<style>
|
|
.about-wrapper {
|
|
margin-top: 10px;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.version-caption {
|
|
display: flex;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.copyright-caption {
|
|
width: 50% !important;
|
|
line-height: 30px;
|
|
font-size: 0.9rem;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon-caption {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.version-wrapper {
|
|
border-radius: .5em;
|
|
color: white;
|
|
background-color: var(--color-deepPurple);
|
|
padding: 5px;
|
|
}
|
|
|
|
.usermanual {
|
|
margin: 10px;
|
|
margin-top: 0;
|
|
padding: 10px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.usermanual-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.usermanual-item .iconfont {
|
|
font-size: 1.1rem !important;
|
|
color: var(--sidebar-text-item);
|
|
}
|
|
</style> |