前端切图学习-意见反馈组件

Feedback UI Design

Posted by R1NG on August 31, 2021 Viewed Times

意见反馈组件 Feedback UI Design

1. 概述

项目本体展示了一个意见反馈小组件.

本项目中涉及的知识点:

  1. 使用 innerHTML 修改组件内部的 HTML 内容.
  2. 使用 scale(...) 缩放元件.

效果:

20210901100201


2. 结构和切图

网页的基本结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div id="panel" class="panel-container">
        <strong>How satisfied are you with our <br/> Customer Support Performance?</strong>
        <div class="ratings-container">
            <div class="rating">
                <img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt="">
                <small>Unhappy</small>
            </div>

            <div class="rating">
                <img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt=""/>
                <small>Neutral</small>
            </div>

            <div class="rating active">
                <img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt=""/>
                <small>Satisfied</small>
            </div>
        </div>
        <button class="btn" id="send">Send Review</button>
    </div>
</body>


3. 编写 CSS 样式

首先将 body 的样式设为 水平垂直居中:

1
2
3
4
5
6
7
8
9
10
11
12
body {
    background-color: #fef9f2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
}

其次处理最外层包裹所有内容的容器样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.panel-container {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 4px;
    font-size: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    max-width: 400px;
}
.panel-container strong {
    line-height: 20px;
}
.ratings-container {
    display: flex;
    margin: 20px 0;
}

最后处理三个选项按钮和提交按钮的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.rating {
    flex:1;
    cursor: pointer;
    padding: 20px;
    margin: 10px 5px;
}

.rating:hover, 
.rating.active {
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.rating img {
    width: 40px;
}
.rating small {
    color: #555;
    display: inline-block;
    margin: 10px 0 0;
}

.rating:hover small, 
.rating.active small {
    color: #111
}

.btn {
    background-color: #302d2b;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 12px 30px;
}

.btn:focus {
    outline: 0;
}
.btn:active {
    transform: scale(.98);
}
.fa-heart {
    color: red;
    font-size: 30px;
    margin-bottom: 10px;
}

完整的 CSS 样式表如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
* {
   box-sizing: border-box;
}
body {
   background-color: #fef9f2;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   overflow: hidden;
   margin: 0;
   user-select: none;
   -webkit-user-select: none;
}
.panel-container {
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, .3);
   border-radius: 4px;
   font-size: 90%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 30px;
   max-width: 400px;
}
.panel-container strong {
   line-height: 20px;
}
.ratings-container {
   display: flex;
   margin: 20px 0;
}

.rating {
   flex:1;
   cursor: pointer;
   padding: 20px;
   margin: 10px 5px;
}

.rating:hover, 
.rating.active {
   border-radius: 4px;
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.rating img {
   width: 40px;
}
.rating small {
   color: #555;
   display: inline-block;
   margin: 10px 0 0;
}

.rating:hover small, 
.rating.active small {
   color: #111
}

.btn {
   background-color: #302d2b;
   color: #fff;
   border: 0;
   border-radius: 4px;
   padding: 12px 30px;
}

.btn:focus {
   outline: 0;
}
.btn:active {
   transform: scale(.98);
}
.fa-heart {
   color: red;
   font-size: 30px;
   margin-bottom: 10px;
}


4. JavaScript

最后编写 JavaScript 函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const ratings = document.querySelectorAll('.rating');
const ratingsContainer = document.querySelector('.ratings-container');
const sendBtn = document.querySelector('#send');
const panel = document.querySelector('#panel');
let selectedRating = 'Satisfied';

ratingsContainer.addEventListener('click', (e) => {
    if (e.target.parentNode.classList.contains('rating')) {
        removeActive();
        e.target.parentNode.classList.add('active');
        selectedRating = e.target.nextElementSibling.innerHTML;
    }
    if (e.target.classList.contains('rating')) {
        removeActive();
        e.target.classList.add('active');
        selectedRating = e.target.nextElementSibling.innerHTML;
    }
})

sendBtn.addEventListener('click', (e) => {
    panel.innerHTML = `
        <i class="fas fa-heart"></i>
        <strong>Thank You!</strong>
        <br>
        <strong>Feedback: ${selectedRating}</strong>
        <p>We will use your feedback to improve our customer service.</p>`;
})

function removeActive() {
    for (let i=0; i<ratings.length; i++) {
        ratings[i].classList.remove('active');
    }
}

最后, 完整的网页演示可见 此处