1. Adjust the theme color of the project

/ SRC/CSS/quasar. Variables. SCSS file, amend the theme color to # 086491

See the effect:

The Quasar framework has the distinction of modifying code in VSCode so that it can be viewed in the browser. (Note: In order to see the effect of the modified Code, first, the project should be running normally, which means that the project is started on the command line. Second, the modified Code in VS Code should be saved after Ctrl+S.)

2. Adjust the toolbar

src/layouts/MainLayout.vue

Delete the default app name and Quasar version number

<q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = ! leftDrawerOpen"
        />

        <! -- <q-toolbar-title> Quasar App </q-toolbar-title> <div>Quasar v{{ $q.version }}</div> -->

      </q-toolbar>
    </q-header>
Copy the code

Adjust as follows:

<q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = ! leftDrawerOpen"
        />
        <! -- Remove the default app name and Quasar version number of the project -->
        <! -- <q-toolbar-title> Quasar App </q-toolbar-title> <div>Quasar v{{ $q.version }}</div> -->
      </q-toolbar>

      <! -- Todo, subtitle date, tentatively written as Monday 4 November-->
      <div class="q-px-lg q-pt-xl q-mb-md">
        <div class="text-h3">Todo</div>
        <div class="text-subtitle1">Monday 4 November</div>
      </div>

    </q-header>
Copy the code

Take a look at the results first:

Next, let’s look at the code added above:


      <! -- Todo, subtitle date, tentatively written as Monday 4 November-->
      <div class="q-px-lg q-pt-xl q-mb-md">
        <div class="text-h3">Todo</div>
        <div class="text-subtitle1">Monday 4 November</div>
      </div>
Copy the code

Check the Quasar document www.quasarchs.com/style/typog…

Now it’s understandable,class="text-h3" class="text-subtitle1"Is used to adjust the title level of the text, set the style.

        <div class="text-h3">Todo</div>
        <div class="text-subtitle1">Monday 4 November</div>
Copy the code

In the Quasar documentation, www.quasarchs.com/style/spaci…

Understandably,class="q-px-lg q-pt-xl q-mb-md"The main function of the is to adjust the spacing of elements

Padding-left/right, size large

Q-pt-xl: Padding-style, extra large

Q-mb-md means: margin, bottom direction: size is medium

If not adjusted, the effect is as follows:

increaseclass="q-px-lg q-pt-xl q-mb-md"After that, the effect is as follows:

3. Set the toolbar background image

Download the free background images from pixabay.com/ at pixabay.com/photos/moun…

Then place the downloaded background image in a folder in the project directorysrc/statics

The complete code of the toolbar is as follows:

<q-header>
    <q-toolbar>
      <q-btn
        flat
        dense
        round
        icon="menu"
        aria-label="Menu"
        @click="leftDrawerOpen = ! leftDrawerOpen"
      />
    </q-toolbar>

      <div class="q-px-lg q-pt-xl q-mb-md">
        <div class="text-h3">Todo</div>
        <div class="text-subtitle1">Monday 4 November</div>
      </div>
      
      <! Toolbar background image -->
      <q-img
        src=".. /statics/mountains.jpeg"
        class="header-image absolute-top"/>

    </q-header>
Copy the code

CSS styles

height: 100%; Height fill toolbar Z-index: -1; The overlapping position is the next layer: 0.2; Transparency filter: Grayscale (100%); Change the grayscale of the image

<style lang="scss">
  .header-image {
    height: 100%;
    z-index: -1;
    opacity: 0.2;
    filter: grayscale(100%);
  }
</style>
Copy the code

The final effect is as follows:

4. Dynamically display today’s date

Quasar provides a set of functions that can easily display the time. Let’s take a look at the documentation

www.quasarchs.com/quasar-util…

// Import the time function
import { date } from 'quasar'
/ / timestamp
let timeStamp = Date.now()
// Format the time
let formattedString = date.formatDate(timeStamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
Copy the code

The code in the project is as follows:

{{todaysDate}} {todaysDate}} {todaysDate}} {todaysDate}} {todaysDate}} {todaysDate}

<div class="q-px-lg q-pt-xl q-mb-md">
    <div class="text-h3">Todo</div>
    <div class="text-subtitle1">{{ todaysDate }}</div>
</div>
Copy the code

In the js code, the todaysDate method is defined to return the current time using computed attributes

<script>
// Import the date function
import {date} from 'quasar'

export default {
  name: 'MainLayout',
  data () {
    return {
      leftDrawerOpen: false.essentialLinks: linksData
    }
  },

  // Calculate property to get the current time
  computed: {
    todaysDate() {
      // Timestamp of the current time
      let timeStamp = Date.now()
      // Returns the time of formatting
      return date.formatDate(timeStamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ')
    }
  }
}

</script>
Copy the code

The final effect is as follows:

Finally, adjust the time display format:'dddd D MMMM'

// Calculate property to get the current time
  computed: {
    todaysDate() {
      // Timestamp of the current time
      let timeStamp = Date.now()
      // Returns the time of formatting
      return date.formatDate(timeStamp, 'dddd D MMMM')}}Copy the code

5. Replace side drawer menu bar

Sidebar, corresponding to the area marked with red box in the screenshot

The corresponding code in the project is as follows:

src/layouts/MainLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>.</q-header>

		<! Side drawer menu bar -->
    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>
Copy the code

Next, in the Quasar document, replace the existing sidebar with the appropriate sidebar

www.quasarchs.com/layout/draw…

Copy the code into the project and clean up the original sidebar code. The final code looks like this:

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = ! leftDrawerOpen"
        />
        <! -- Remove the default app name and Quasar version number of the project -->
        <! -- <q-toolbar-title> Quasar App </q-toolbar-title> <div>Quasar v{{ $q.version }}</div> -->
      </q-toolbar>

        <div class="q-px-lg q-pt-xl q-mb-md">
          <div class="text-h3">Todo</div>
          <div class="text-subtitle1">{{ todaysDate }}</div>
        </div>
        <! Toolbar background image -->
        <q-img
          src=".. /statics/mountains.jpeg"
          class="header-image absolute-top"/>

    </q-header>

    <! Side drawer menu bar -->
    <! -- change v-model default value of drawer to leftDrawerOpen
    <q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        :width="200"
        :breakpoint="400"
      >
        <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
          <q-list padding>
            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="inbox" />
              </q-item-section>

              <q-item-section>
                Inbox
              </q-item-section>
            </q-item>

            <q-item active clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="star" />
              </q-item-section>

              <q-item-section>
                Star
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="send" />
              </q-item-section>

              <q-item-section>
                Send
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="drafts" />
              </q-item-section>

              <q-item-section>
                Drafts
              </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>

        <q-img class="absolute-top" src="https://cdn.quasar.dev/img/material.png" style="height: 150px">
          <div class="absolute-bottom bg-transparent">
            <q-avatar size="56px" class="q-mb-sm">
              <img src="https://cdn.quasar.dev/img/boy-avatar.png">
            </q-avatar>
            <div class="text-weight-bold">Razvan Stoenescu</div>
            <div>@rstoenescu</div>
          </div>
        </q-img>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
	import EssentialLink from 'components/EssentialLink.vue'
	// Import the date function
	import {date} from 'quasar'

	export default {
	  name: 'MainLayout',
	  
	  data () {
	    return {
	      leftDrawerOpen: false,}},// Calculate attributes
	  computed: {
	    todaysDate() {
	      // Timestamp of the current time
	      let timeStamp = Date.now()
	      // Returns the time of formatting
	      return date.formatDate(timeStamp, 'dddd D MMMM')}}}</script>

<style lang="scss">
  .header-image {
    height: 100%;
    z-index: -1;
    opacity: 0.2;
    filter: grayscale(100%);
  }
</style>
Copy the code

The effect is as follows:

5.1. Adjust the details of side drawer bar

Modify the profile picture, background image, and nickname

<q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        :width="200"
        :breakpoint="400"
      >
        <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
          <q-list padding>.</q-list>
        </q-scroll-area>
				
				<! Background image at the top of the sidebar, user avatar, nickname -->
        <q-img class="absolute-top" src=".. /statics/mountains.jpeg" style="height: 150px">
          <div class="absolute-bottom bg-transparent">
            <q-avatar size="56px" class="q-mb-sm">
              <img src=".. /statics/liushilu.jpg">
            </q-avatar>
            <div class="text-weight-bold">Liu shi lu</div>
            <div>I'm Pipi Lu</div>
          </div>
        </q-img>
    </q-drawer>
Copy the code

The effect is as follows:

Adjust the height of the background image on the side menu bar to be the same as the height of the background image on the right

Open your browser’s element inspector and see that the Header area is 192px high, as well as the side drawer menu bar

<q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        :width="200"
        :breakpoint="400"
      >
        <! -- Sidebar menu area -->
        <q-scroll-area style="height: calc(100% - 192px); margin-top: 192px; border-right: 1px solid #ddd">
          <q-list padding>.</q-list>
        </q-scroll-area>
				
				<! Background image at the top of the sidebar, user avatar, nickname -->
        <! -- Top height of sidebar 192px -->
        <q-img class="absolute-top" src=".. /statics/mountains.jpeg" style="height: 192px">
          <div class="absolute-bottom bg-transparent">
            <q-avatar size="56px" class="q-mb-sm">
              <img src=".. /statics/liushilu.jpg">
            </q-avatar>
            <div class="text-weight-bold">Liu shi lu</div>
            <div>I'm Pipi Lu</div>
          </div>
        </q-img>
    </q-drawer>
Copy the code

Style =”height: calc(100%-192px)”

For specific uses of calc(), see:zhuanlan.zhihu.com/p/138308285

5.2. Sidebar Menu

Adjust the sidebar menu, only two menus are retained, and the menu name is changed to TOdo and Help. Besides, Quasar is a framework based on material Design specification, so you can use the icon of Material Design by directly entering the name.

The material Design icon can be searched at fonts.google.com/icons

<! -- Sidebar menu area -->
  <q-scroll-area style="height: calc(100% - 192px); margin-top: 192px; border-right: 1px solid #ddd">
    <q-list padding>
      <q-item clickable v-ripple>
        <! -- Just need the icon name to use the Material Design icon -->
        <q-item-section avatar>
          <q-icon name="list" />
        </q-item-section>
        <! -- Menu name -->
        <q-item-section>
          Todo
        </q-item-section>
      </q-item>

      <q-item active clickable v-ripple>
        <q-item-section avatar>
          <q-icon name="help" />
        </q-item-section>

        <q-item-section>
          Help
        </q-item-section>
      </q-item>
    </q-list>
  </q-scroll-area>
Copy the code

Since there are two menus, there must be two pages, so we need to create two new Todo and Help pages.

src/pages/Todo.vue

Change the original index.vue to todo.vue

<template>
  <q-page>
    <h5>Todo</h5>
  </q-page>
</template>

<script>
export default{}</script>
Copy the code

src/pages/Help.vue

<template>
  <q-page>
    <h5>Help</h5>
  </q-page>
</template>

<script>
export default{}</script>
Copy the code

After the simple page is built, start to modify the route of the page jump

src/router/routes.js

const routes = [
  {
    path: "/".component: () = > import("layouts/MainLayout.vue"),
    children: [{path: "".component: () = > import("pages/Todo.vue")}, {path: "/help".component: () = > import("pages/Help.vue")}}],// Always leave this as last one,
  // but you can also remove it
  {
    path: "*".component: () = > import("pages/Error404.vue")}];export default routes
Copy the code

The sidebar menu adds the attributes of the routing path

To =”/” points to the page route

Exact Current menu item

<! -- Sidebar menu area --><q-scroll-area style="height: calc(100% - 192px); margin-top: 192px; border-right: 1px solid #ddd">
    <q-list padding>
      <q-item
        to="/"
        exact
        clickable
        v-ripple>
        <! -- Just need the icon name to use the Material Design icon -->
        <q-item-section avatar>
          <q-icon name="list" />
        </q-item-section>
        <! -- Menu name -->
        <q-item-section>
          Todo
        </q-item-section>
      </q-item>

      <q-item
        to="/help"
        exact
        clickable
        v-ripple>
        <q-item-section avatar>
          <q-icon name="help" />
        </q-item-section>

        <q-item-section>
          Help
        </q-item-section>
      </q-item>
    </q-list>
  </q-scroll-area>
Copy the code

Now you can click the sidebar menu to jump to the page

Finally the currentsrc/layouts/MainLayout.vueThe complete code is as follows:

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = ! leftDrawerOpen"
        />
        <! -- Remove the default app name and Quasar version number of the project -->
        <! -- <q-toolbar-title> Quasar App </q-toolbar-title> <div>Quasar v{{ $q.version }}</div> -->
      </q-toolbar>

        <div class="q-px-lg q-pt-xl q-mb-md">
          <div class="text-h3">Todo</div>
          <div class="text-subtitle1">{{ todaysDate }}</div>
        </div>
        <! Toolbar background image -->
        <q-img
          src=".. /statics/mountains.jpeg"
          class="header-image absolute-top"/>

    </q-header>

    <! Side drawer menu bar -->
    <! -- change v-model default value of drawer to leftDrawerOpen
    <q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        :width="250"
        :breakpoint="600"
      >
        <! -- Sidebar menu area -->
        <q-scroll-area style="height: calc(100% - 192px); margin-top: 192px; border-right: 1px solid #ddd">
          <q-list padding>
            <q-item
              to="/"
              exact
              clickable
              v-ripple>
              <! -- Just need the icon name to use the Material Design icon -->
              <q-item-section avatar>
                <q-icon name="list" />
              </q-item-section>
              <! -- Menu name -->
              <q-item-section>
                Todo
              </q-item-section>
            </q-item>

            <q-item
              to="/help"
              exact
              clickable
              v-ripple>
              <q-item-section avatar>
                <q-icon name="help" />
              </q-item-section>

              <q-item-section>
                Help
              </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>
        <! Background image at the top of the sidebar, user avatar, nickname -->
        <! -- Top height of sidebar 192px -->
        <q-img class="absolute-top" src=".. /statics/mountains.jpeg" style="height: 192px">
          <div class="absolute-bottom bg-transparent">
            <! -- User avatar -->
            <q-avatar size="56px" class="q-mb-sm">
              <img src=".. /statics/liushilu.jpg">
            </q-avatar>
            <div class="text-weight-bold">liushilu</div>
            <div>I'm Pipi Lu</div>
          </div>
        </q-img>
    </q-drawer>

    <q-page-container>
      <! -- keep-alive All view components under paths will be cached -->
      <keep-alive>
        <router-view />
      </keep-alive>
    </q-page-container>
  </q-layout>
</template>

<script>
// Import the date function
import {date} from 'quasar'

export default {
  name: 'MainLayout',
  data () {
    return {
      leftDrawerOpen: false,}},// Calculate attributes
  computed: {
    todaysDate() {
      // Timestamp of the current time
      let timeStamp = Date.now()
      // Returns the time of formatting
      return date.formatDate(timeStamp, 'dddd D MMMM')}}}</script>

<style lang="scss">
  .header-image {
    height: 100%;
    z-index: -1;
    opacity: 0.2;
    filter: grayscale(100%);
  }
</style>
Copy the code