blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-17 bc95187efc506413cf85749fe36fe748cf75fed5
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 {
af029b 38                 img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/404.png\"",
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);
ec97e0 57         padding: 10px 30px 20px;
f9c38e 58
I 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;
054cde 74             // background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
I 75             background: #fff repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
06ee76 76         }
L 77     }
78
f9c38e 79     .link-box {
fc0c10 80         padding: 3.375rem 2.1875rem 0.1875rem;
06ee76 81         overflow: hidden;
fc0c10 82         margin: -3.125rem -3.125rem 0;
f9c38e 83         display: flex;
I 84         flex-direction: row;
85         flex-wrap: wrap;
86
87         a {
88             width: 33.75rem;
89             background: #fff;
90             float: left;
91             margin: 0 0 4.375rem;
92             color: #2E2E2E;
93             text-decoration: none;
94             border-bottom: none;
95             border-radius: .25rem;
96             overflow: hidden;
97             -webkit-touch-callout: none;
98             -webkit-user-select: none;
99             -moz-user-select: none;
100             -ms-user-select: none;
101             user-select: none;
102             // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
103             -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
104             -moz-box-shadow: 0 3px 0.0625rem #0000001a;
105             box-shadow: 0 3px 0.0625rem #0000001a;
106             -webkit-transform: translate3d(0, 0, 0);
107             -moz-transform: translate3d(0, 0, 0);
108             -ms-transform: translate3d(0, 0, 0);
109             -o-transform: translate3d(0, 0, 0);
110             transform: translate3d(0, 0, 0);
111             -webkit-transition: .3s;
112             -moz-transition: .3s;
113             -ms-transition: .3s;
114             -o-transition: .3s;
115             transition: .3s;
116
117             .content {
118                 text-align: center;
119                 background-color: #fff;
120
121                 .title {
122                     text-align: center;
123                     padding: 1rem .25rem;
124                     font-weight: 500;
125                     color: #333;
126                     white-space: nowrap;
127                     overflow: hidden;
128                     text-overflow: ellipsis;
129                     margin: 0;
130                 }
131             }
132         }
133
134         .thumb {
135             font-size: 0;
136             overflow: hidden;
137             background-color: #fff;
138             margin: 0;
139             border-top-left-radius: .25rem;
140             border-top-right-radius: .25rem;
141
142             img {
143                 width: 100%;
144                 height: auto;
145                 position: relative;
146                 margin: 0;
147                 padding: 0;
148                 -webkit-transition: .4s;
149                 -moz-transition: .4s;
150                 -ms-transition: .4s;
151                 -o-transition: .4s;
152                 transition: .4s;
153             }
154         }
06ee76 155     }
L 156
f9c38e 157     // .link-box a:hover:after {
I 158     //     left: 0;
159     //     width: 100%;
160     //     -webkit-transition: width 350ms;
161     //     -moz-transition: width 350ms;
162     //     -ms-transition: width 350ms;
163     //     -o-transition: width 350ms;
164     //     transition: width 350ms;
165     // }
06ee76 166
L 167
168     .link-box a:hover,
169     .link-box a:active {
170         -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
171         -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
172         box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
173         -webkit-transform: translateY(-0.25rem);
174         -moz-transform: translateY(-0.25rem);
175         -ms-transform: translateY(-0.25rem);
176         -o-transform: translateY(-0.25rem);
177         transform: translateY(-0.25rem);
178         -moz-transform: none;
179     }
180
f9c38e 181     @media screen and (max-width: 710px) and (min-width: 319px) {
I 182         .link-box {
183             padding: 4.375rem 3.125rem 3.125rem;
184             margin: -3.125rem;
185         }
186
187         .myFriend {
188             padding: 10px 15px 0px;
189         }
190     }
191
06ee76 192     @media screen and (min-width: 1600px) {
L 193         .link-box a {
194             margin: 0 0.9375rem 3.75rem;
1cf6d9 195             width: -webkit-calc(100% / 5 - 4rem);
I 196             width: calc(100% / 5 - 4rem);
06ee76 197         }
L 198     }
199
1cf6d9 200     @media screen and (max-width: 1599px) and (min-width: 1439px) {
06ee76 201         .link-box a {
L 202             margin: 0 0.9375rem 3.75rem;
1cf6d9 203             width: -webkit-calc(100% / 3 - 8rem);
I 204             width: calc(100% / 3 - 8rem);
205         }
206     }
207     @media screen and (max-width: 1438px) and (min-width: 791px) {
208         .link-box a {
209             margin: 0 0.9375rem 3.75rem;
210             width: -webkit-calc(100% / 4 - 2.3rem);
211             width: calc(100% / 4 - 2.3rem);
06ee76 212         }
L 213     }
214
1cf6d9 215     @media screen and (max-width: 790px) and (min-width: 501px) {
06ee76 216         .link-box a {
L 217             margin: 0 0.9375rem 3.75rem;
1cf6d9 218             width: -webkit-calc(100% / 3 - 2.3rem);
I 219             width: calc(100% / 3 - 2.3rem);
06ee76 220         }
L 221     }
f9c38e 222
I 223
224     @media screen and (max-width: 500px) and (min-width: 319px) {
225         .link-box a {
226             margin: 0 0.75rem 1.5rem;
1cf6d9 227             width: -webkit-calc(100% / 3 - 1.5rem);
I 228             width: calc(100% / 3 - 1.5rem);
f9c38e 229         }
2f9d3c 230
I 231         .blog-main {
232             padding-left: 3%;
233             padding-right: 3%;
234         }
f9c38e 235     }
06ee76 236 </style>