This is the 17th day of my participation in Gwen Challenge

After finishing the cleaning work yesterday, the whole Setting page is replaced. The complete code is as follows:

< the template > < n - space vertical > < h4 > show holidays < / h4 > < n - switch v - model: value = "inputSwitchFestivalsModel" size = "large" @update-value="updateFestivalsModel" /> <h4> Display weather forecast </h4> < N-switch V-model :value="inputSwitchWeatherModel" size="large" @update-value="updateWeatherModel" /> <n-space v-if="inputSwitchWeatherModel" inline > <n-input-number V-model :value="longitude" :min=" longitude" : Max ="longitude" : v-model:value="longitude" :min=" longitude" : Max ="longitude" :value="longitude" @update:value="changeLocalLocation" /> <n-input-number v-model:value="latitude" :min="-90" :max="90" :show-button="false" placeholder=" latitude "@update:value="changeLocalLocation" /> </n-space> <n-divider console > Focus Settings </n-divider> <n-space vertical> <n-slider v-model:value="focus_time" :step="5" :min="5" :max="120" /> <n-button type="primary" size="large" @click="focus" > <template #icon> <n-icon> <caret-right-icon /> </n-icon> </template> {{ focusLabel }} </n-button> </n-space> </n-space> </template> <script lang="ts"> import { defineComponent} from 'vue'; import { useStore } from '/@/store'; import { NSpace, NSwitch, NInputNumber, NButton, NIcon, NSlider, NDivider } from 'naive-ui'; import { CaretRight as CaretRightIcon } from '@vicons/fa'; export default defineComponent({ name: 'SettingSub', components: { NSpace, NSwitch, NInputNumber, NButton, NIcon, CaretRightIcon, NSlider, NDivider, }, props: { changeShowFestivals: Boolean, changeShowWeather: Boolean, location: Object, }, emits: [ 'focusClick', 'update:visibleFullSetting', 'update:changeShowFestivals', 'update:changeShowWeather', 'update:location', ], setup() { const store = useStore(); return { store, }; }, data() { return { inputSwitchFestivalsModel: this.changeShowFestivals, inputSwitchWeatherModel: this.changeShowWeather, longitude: this.location? .longitude, latitude: this.location? .latitude, focus_time: 40, }; }, computed: {// Calculate attributes' getter focusLabel(): string {return 'start focusing' + this.focus_time + 'minutes '; }, }, mounted() { this.focus_time = this.store.state.focusTime; }, methods: { updateFestivalsModel(value: boolean): void { this.$emit('update:changeShowFestivals', value); }, updateWeatherModel(value: boolean): void { this.$emit('update:changeShowWeather', value); }, changeLocalLocation(): void { this.$emit('update:location', { 'longitude': this.longitude, 'latitude': this.latitude, }); }, focus(): void { this.store.commit('changeFocusTime', this.focus_time); this.$emit('focusClick'); window.electron.ipcRenderer.send('show-focus-window'); ,}}}); </script>Copy the code

Here I used NSwitch to hide the latitude and longitude input box, using V-show found that I click “show lunar calendar” can also remove the hidden box, this is a bug, later I changed to v-if:

<n-space
  v-if="inputSwitchWeatherModel"
  inline
>
  ...
</n-space>
Copy the code

The overall feeling looks good:

I used the “drawer” component to replace the Sidebar component, but the NDrawer component does not have the “close button” function and can only be clicked from the upper layer, so I put it on the Main screen.

<n-drawer V-model :show="visibleFullSetting" :width="drawerWidth" placement="left" > <n-drawer-content title=" set "> <setting-sub v-model:changeShowWeather="changeShowWeather" v-model:changeShowFestivals="changeShowFestivals" v-model:location="location" @focusClick="focusClick" /> </n-drawer-content> </n-drawer>Copy the code

Almanac page

The second “almanac page” to start adjusting. The reason to move ta is relatively simple, because ta uses the layout.

Let me show you the modified code:

<template> <n-layout has-sider :style="layoutStyle"> <n-layout-sider bordered :width="150"> <n-grid x-gap="6" :cols="2" style="height: 100%;" > <n-gi> <div class="nongliString"> {{ lunarData.nongliString }} </div> </n-gi> <n-gi style="padding: 40px 0;" > <div v-for="item in lunarData.ganzhi" :key="item" class="onecn" > {{ item }} </div> </n-gi> </n-grid> </ N-layout-sider > < N-layout :style="layoutStyle"> < N-layout-header bordered> <div> < N-tag type="success" > appropriate </ N-tag > <n-tag v-for="item in lunarData.yi" :key="item" type="success" > {{ item }} </n-tag> </div> </n-layout-header> <n-layout-content content-style="padding: 24px; "> {{ lunarData.yangliString }} </n-layout-content> <n-layout-footer bordered position="absolute"> <div> <n-tag Type ="error" round > bogey </n-tag> <n-tag V-for ="item in lunardata.ji ":key="item" type="error" round > {{item}} </n-tag>  </div> </n-layout-footer> </n-layout> </n-layout> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { NGrid, NGi, NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter, NTag } from 'naive-ui'; import LunarService from '.. /.. /.. /services/LunarService'; export default defineComponent({ name: 'DateViewSub', components: { NGrid, NGi, NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter, NTag, }, props: { date: Date, weather: Object, }, data() { return { layoutStyle: "height: " + (Number(import.meta.env.VITE_APP_HEIGHT) - 100) + "px;" }; }, setup(props) { const lunarService = ref(new LunarService(props.date)); const lunarData = lunarService.value.getDateViewDate(); return { lunarData, }; }}); </script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> @import "~/styles/default.scss"; .nongliString { display: flex; /* align-items: center; margin: 0 auto; height: 100%; Width: 2.5 rem; The font - size: 2.5 em. color: #000; } .onecn { display: flex; /* align-items: center; margin: 0 auto; Width: 1.4 rem; height: 33%; The font - size: 1.4 rem; color: #000; } .n-layout-sider { width: 150px; } .n-layout-header { padding: 24px; } .n-layout-footer { padding: 24px; } </style>Copy the code

Here is the main use of NLayout components, left and right structure:

The left structure mainly shows the lunar calendar and lunar information, the same style as before, but using the NGrid Grid component, the distribution of the layout is divided into left and right halves:

The structure on the right is very simple, mainly using NLayoutHeader, NLayoutContent, NLayoutFooter, up and down the page structure, I have “do” and “don” on the side, the same, using the tag component NTag

Because layout building is difficult to tune, as the authors point out:

However, I spent the night tuning them out, and I still felt a sense of accomplishment. Let’s take a look at the changes before and after:

After modification:

It’s almost as good as it was.

summary

This is the second day of the page reconstruction, due to the usual work, can not spend a lot of time in this project, but also in the limited time to let myself learn something, or there are a lot of worthy learning, I try to record valuable things, less water, welcome everyone’s criticism ~

To be continued!

The code has been synced to Github: github.com/fanly/fanly…