blog的前端代码
view | history | commit | commitdiff
inleft
2022-02-25 fc0c102554f509989dd74b199f298a67f266c3c8
commit | author | age
06ee76 1 <template>
f9c38e 2     <div class="myFriend">
6bcd13 3         <div v-for="temp in list">
I 4             <h1>{{temp.groupName}}</h1>
5             <hr>
7b98c8 6             <div class="link-box">
6bcd13 7                 <!-- <a href="#" target="_blank" class="no-underline"> -->
7b98c8 8
6bcd13 9                 <a :href="listTemp.url" target="_blank" class="no-underline" v-for="listTemp in temp.linkVoList">
7b98c8 10                     <div class="myFlex">
I 11                         <div class="thumb">
12                             <img width="200" height="200" :src="listTemp.avatar" :onerror="img404" :alt="listTemp.name">
13                         </div>
14                         <div class="content">
15                             <p class="title">
16                                 {{listTemp.name}}
17                             </p>
18                         </div>
6bcd13 19                     </div>
I 20                 </a>
21             </div>
06ee76 22         </div>
L 23     </div>
24 </template>
25
26 <script>
6bcd13 27     import {
I 28         queryBlogLinkGroup
29     } from '../../api/blogLink.js'
30     export default {
31         created() {
32             queryBlogLinkGroup().then((res) => {
33                 this.list = res.data;
34             })
35         },
36         data() {
37             return {
7b98c8 38                 img404: "this.onerror='';this.src=\"https://blog.zeruns.tech/tx.jpg\"",
6bcd13 39                 list: []
I 40             }
41         }
42     }
06ee76 43 </script>
L 44
45 </script>
46
47 <style lang="less">
7b98c8 48     .myFlex {
I 49         height: 100%;
50         display: flex;
51         flex-direction: column;
52         justify-content: flex-end;
53     }
54
06ee76 55     .myFriend {
f9c38e 56         box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
I 57         padding: 10px 30px 0px;
58
59         h1 {
60             margin: .67em 0;
61             padding-bottom: .3rem;
62             font-size: 1.8em;
63             line-height: 1.2;
64             position: relative;
65             font-weight: bold;
66         }
67
68         hr {
69             overflow: hidden;
70             margin: 1rem 0;
71             padding: 0;
72             height: .125rem;
73             border: none;
74             background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
06ee76 75         }
L 76     }
77
f9c38e 78     .link-box {
fc0c10 79         padding: 3.375rem 2.1875rem 0.1875rem;
06ee76 80         overflow: hidden;
fc0c10 81         margin: -3.125rem -3.125rem 0;
f9c38e 82         display: flex;
I 83         flex-direction: row;
84         flex-wrap: wrap;
85
86         a {
87             width: 33.75rem;
88             background: #fff;
89             float: left;
90             margin: 0 0 4.375rem;
91             color: #2E2E2E;
92             text-decoration: none;
93             border-bottom: none;
94             border-radius: .25rem;
95             overflow: hidden;
96             -webkit-touch-callout: none;
97             -webkit-user-select: none;
98             -moz-user-select: none;
99             -ms-user-select: none;
100             user-select: none;
101             // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
102             -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
103             -moz-box-shadow: 0 3px 0.0625rem #0000001a;
104             box-shadow: 0 3px 0.0625rem #0000001a;
105             -webkit-transform: translate3d(0, 0, 0);
106             -moz-transform: translate3d(0, 0, 0);
107             -ms-transform: translate3d(0, 0, 0);
108             -o-transform: translate3d(0, 0, 0);
109             transform: translate3d(0, 0, 0);
110             -webkit-transition: .3s;
111             -moz-transition: .3s;
112             -ms-transition: .3s;
113             -o-transition: .3s;
114             transition: .3s;
115
116             .content {
117                 text-align: center;
118                 background-color: #fff;
119
120                 .title {
121                     text-align: center;
122                     padding: 1rem .25rem;
123                     font-weight: 500;
124                     color: #333;
125                     white-space: nowrap;
126                     overflow: hidden;
127                     text-overflow: ellipsis;
128                     margin: 0;
129                 }
130             }
131         }
132
133         .thumb {
134             font-size: 0;
135             overflow: hidden;
136             background-color: #fff;
137             margin: 0;
138             border-top-left-radius: .25rem;
139             border-top-right-radius: .25rem;
140
141             img {
142                 width: 100%;
143                 height: auto;
144                 position: relative;
145                 margin: 0;
146                 padding: 0;
147                 -webkit-transition: .4s;
148                 -moz-transition: .4s;
149                 -ms-transition: .4s;
150                 -o-transition: .4s;
151                 transition: .4s;
152             }
153         }
06ee76 154     }
L 155
f9c38e 156     // .link-box a:hover:after {
I 157     //     left: 0;
158     //     width: 100%;
159     //     -webkit-transition: width 350ms;
160     //     -moz-transition: width 350ms;
161     //     -ms-transition: width 350ms;
162     //     -o-transition: width 350ms;
163     //     transition: width 350ms;
164     // }
06ee76 165
L 166
167     .link-box a:hover,
168     .link-box a:active {
169         -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
170         -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
171         box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
172         -webkit-transform: translateY(-0.25rem);
173         -moz-transform: translateY(-0.25rem);
174         -ms-transform: translateY(-0.25rem);
175         -o-transform: translateY(-0.25rem);
176         transform: translateY(-0.25rem);
177         -moz-transform: none;
178     }
179
f9c38e 180     @media screen and (max-width: 710px) and (min-width: 319px) {
I 181         .link-box {
182             padding: 4.375rem 3.125rem 3.125rem;
183             margin: -3.125rem;
184         }
185
186         .myFriend {
187             padding: 10px 15px 0px;
188         }
189     }
190
06ee76 191     @media screen and (min-width: 1600px) {
L 192         .link-box a {
193             margin: 0 0.9375rem 3.75rem;
28d46d 194             width: -webkit-calc(100% / 5 - 1.875rem);
I 195             width: calc(100% / 5 - 1.875rem);
06ee76 196         }
L 197     }
198
199     @media screen and (max-width: 1599px) and (min-width: 768px) {
200         .link-box a {
201             margin: 0 0.9375rem 3.75rem;
28d46d 202             width: -webkit-calc(100% / 4 - 1.875rem);
I 203             width: calc(100% / 4 - 1.875rem);
06ee76 204         }
L 205     }
206
207     @media screen and (max-width: 767px) and (min-width: 501px) {
208         .link-box a {
209             margin: 0 0.9375rem 3.75rem;
210             width: -webkit-calc(100% / 3 - 1.875rem);
211             width: calc(100% / 3 - 1.875rem);
212         }
213     }
f9c38e 214
I 215
216     @media screen and (max-width: 500px) and (min-width: 319px) {
217         .link-box a {
218             margin: 0 0.75rem 1.5rem;
219             width: -webkit-calc(50% - 1.5rem);
220             width: calc(50% - 1.5rem);
221         }
222     }
06ee76 223 </style>