回复知乎提问，HTML/Vue代码在线实时编辑、预览

            
                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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

            
             <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            bottom: 0;
            text-decoration: none;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100v;
            background-color: #b7c4d8;
        }

        .shell {
            width: 1200px;
            height: 700px;
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 10px 5px 50px rgba(122, 39, 39, 0.39);
        }

        .images {
            width: 500%;
            height: 100%;
            display: flex;
            position: absolute;
            left: 0;
            transition: .2s;
        }

        .img {
            width: 100%;
            background-size: cover;
        }

        .img:nth-child(1) {
            background-image: url("img/04.png");
          background-color: #aabbcc;
        }

        .img:nth-child(2) {
            background-image: url("img/02.png");
          background-color: #aaccbb;
        }

        .img:nth-child(3) {
            background-image: url("img/03.png");
          background-color: #bbaacc;
        }

        .img:nth-child(4) {
            background-image: url("img/01.png");
          background-color: #bbccaa;
        }

        .img:nth-child(5) {
            background-image: url("img/05.png");
          background-color: #ccbbaa;
        }

        .min {
            display: flex;
            justify-content: space-evenly;
            position: absolute;
            bottom: 40px;
            width: 30%;
            z-index: 999;
            left: 50%;
            transform: translateX(-50%);
        }

        .m {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border-radius: 50%;
            border: solid rgba(255, 255, 255, 0.5) 5px;
            background-color: #fff;
        }

        .button {
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            justify-content: space-between;
            user-select: none;
        }

        .button-left,
        .button-right {
            font-size: 50px;
            background-color: rgba(102, 123, 161, 0.288);
            padding: 0 20px;
            cursor: pointer;
            line-height: 700px;
            color: #fff;
        }
        .bg{
            width: 100vw;
            height: 100vh;
            background-image: url(./img/04.png);
            z-index: -9999;
            position: absolute;
            filter:blur(12px);
            opacity: .5;
            
        }
    </style>