Enterprise official website applet building tutorial - solution

Catalog

01 General introduction

02 The first part of home page construction

03 The second part of home page construction

04 The third part of home page construction

05 Home page construction Part IV

06 The fifth part of home page construction

We have used five articles to completely introduce the construction method of the home page of the official website , In fact, the content of the home page of a website is still the most , The remaining sections are relatively simple . In this section, we will set up a solution page .

Insert picture description here

Open console , Switch to the solution page

Insert picture description here

First add a top navigation component

Insert picture description here

Then add a common container component

Insert picture description here

Enter the following style ：

width: 710px;
    height: 320px;
    opacity: 1;
    margin-top: 20px;
    background: rgb(0, 0, 0);
    margin-left: 20px;
    border-radius: 16px

Insert picture description here

Add another ordinary container inside

Insert picture description here

Enter the following style ：

width: 710px;
    height: 320px;
    opacity: 1;
    margin-top: 0px;
    border-radius: 16px;
    background-image: url(https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-07/lowcode-4385);
    background-size: 100% 100%

Insert picture description here

Add a common container component to it

Insert picture description here

Add the following style ：

display: block;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  width: 710px;
  height: 320px;
  border-radius: 16px;
  padding-top: 1px;

Insert picture description here

Put another ordinary container inside , And place picture and text components

Insert picture description here

The following styles are added to ordinary containers ：

width: 156px;
  height: 56px;
  display: flex;
  background: rgba(255, 255, 255, 0.3);
  margin-left: 40px;
  border-radius: 32px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  border: 2px solid rgba(255,255,255,0.30);

Add the following styles to the picture component ：

width: 40px;
    height: 40px;
    display: inline-block;
  margin-right: 6px;

Add the following styles to the text component ：

white-space: pre-line;
    height: 40px;
    margin-top: 4px;
    display: inline-block;
    color: rgb(255, 255, 255);
    font-size: 26px;
    line-height: 40

Insert picture description here

Then add an ordinary container , Put text components inside

Insert picture description here

The following styles are added to ordinary containers ：

 margin-top: 100px;
    margin-left: 40px

Add the following styles to the text component ：

white-space: pre-line;
    display: inline;
    color: rgb(255, 255, 255);
    font-size: 32px;
    font-weight: 500

After the layout is built, the variable binding , Because we have multiple schemes , So you need to bind the loop variable

Insert picture description here

Use expressions to bind

Array.from($page.dataset.state.solutionData)

Insert picture description here

If you bind the page directly, an error will be reported , Because there are no variables defined , We need to define a variable first

Insert picture description here

Create variables solutionData, Select model variable , choice getList Method

Insert picture description here

Insert picture description here

Then continue to bind variables , This binds the style to the... In the loop pic Variable

Insert picture description here

Insert picture description here

So the background color is different

Insert picture description here

Then bind the text separately , The solution is OK