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

Today is an aside, I was thinking of writing code tonight, but the temporary neighborhood committee said there was anhui vaccine, hurry to play, found the whole process: The whole process was completed in one go, with all staff in place. The site was warm and orderly. Except for 30 minutes of observation, other processes were basically completed within 3 minutes — I had to say that after the epidemic, everyone had “love” and care.

Also because of the vaccine, tonight the probability of the emergence of the “hydrological”, you see many forgive.

All right, let’s start our recording for tonight.

It’s already day 24 and it’s time to tweak the style. I did an experiment by reducing both the length and width of the application by 200:

VITE_APP_WIDTH=500
VITE_APP_HEIGHT=400
Copy the code

The styling

Found that the pattern layout and other problems:

  1. The home page has two more scroll bars:

  1. Create event page, date selection box out of bounds:

  1. The Tab interface is out of width

  1. Menu bar setting out height

  1. The almanac page is even more confusing

How to solve the layout problem brought by the change of length and width is the main work next.

The Tab interface is out of width

For this problem I tried to increase the NDrawer width a bit:

So we still need to look at NTab:

And I think the gap is too wide:

--tab-gap: 36px;
Copy the code

So we need to decrease this value:

--tab-gap: 18px;
Copy the code

Menu bar setting out height









<n-grid: X-gap ="12" : COLs ="2"> <n-grid-item> < H4 > Display holiday (Lunar calendar)</ H4 > <n-switch V-model :value="trayFestivalsModel" Size ="large" @update-value="updateTraySetting" /> </n-grid-item> <n-grid-item> <h4> Display weather forecast </h4> <n-switch v-model:value="trayWeatherModel" size="large" @update-value="updateTraySetting" /> </n-grid-item> <n-grid-item> <h4> <n-switch V-model :value="trayWeekModel" size="large" @update-value="updateTraySetting" /> </n-grid-item> <n-grid-item> <h4> Display seconds </h4> <n-switch V-model :value="traySecondsModel" size="large" @update-value="updateTraySetting" />  </n-grid-item> </n-grid>Copy the code

summary

I really didn’t have enough time to write my code tonight, so I had to write everything down. The next few days will be spent polishing the layout and inviting our UI designers to help design the page and Logo image until the launch standard is reached.

To be continued!

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