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