Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 0866b26

Browse filesBrowse files
halfrosthalfrost
committed
完成购物车页面的搭建
1 parent f3a623b commit 0866b26
Copy full SHA for 0866b26

File tree

1 file changed

+290
-0
lines changed
Filter options

1 file changed

+290
-0
lines changed

‎src/pages/goodsCart.vue

Copy file name to clipboard
+290Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<template>
2+
<div>
3+
<main class="page">
4+
<div class="head">
5+
<div class="guide">
6+
<div>ObjC 中国</div>
7+
</div>
8+
</div>
9+
10+
<div id=" content ">
11+
<div class="content-inner ">
12+
<div class="core-window ">
13+
<div class="store-product-detail core-clearfix ">
14+
<div class="store-product-detail-image">
15+
<img src="https://dxezhqhj7t42i.cloudfront.net/image/f8efab08-3db4-4707-bf47-efce1f744559 " height="394 " width="300 " alt=" " class
16+
="img-border "></img>
17+
</div>
18+
<h2 class="store-product-detail-title">Swifter - Swift 必备 tips (第三版)</h2>
19+
<h3 class="store-product-detail-pricing "><span class='store-product-price'><span class='store-value-money store-value-money-single'>&#65509;49.00</span></span></h3>
20+
<div class="store-product-detail-description ">
21+
<div class="store-product-detail-description-short ">Swift 是 Apple 于 WWDC 2014 提出的一门全新的开发语言。这门语言从其他很多语言中继承和学习了不少优点，语法非常优美，并且具有轻便灵活等特点，一经推出就备受瞩目。活跃在 iOS 开发一线的作者 王巍(onevcat) 参加了 WWDC 14 开发者大会，亲历了这门语言的诞生，并在第一时间进行了大量的学习和研究。在本书中作者通过总结和分享了 Swift 中 100 条十分实用的小技巧和需要特别注意的地方，希望能让大家更好更快地掌握 Swift。
22+
</div>
23+
</div>
24+
<el-input-number v-model="book1" @change="handleChange" :min=0 style="bottom: 15px; right: 10px; position: absolute;"> </el-input-number>
25+
</div>
26+
27+
28+
<div class="core-section core-clearfix store-section-offer-program core-js-enabled-block ">
29+
<h2 class="core-section-header ">另推荐购买</h2>
30+
<div class="core-section-body ">
31+
<div class="store-product-list store-product-list-offer ">
32+
<div class="store-product-detail store-product-list-offer-item ">
33+
<div class="store-product-detail-image">
34+
<img src="https://dxezhqhj7t42i.cloudfront.net/image/266b3bbf-36e0-4cd2-807e-aeaf7bcf414f " height="400 " width="300 " alt=" " class ="img-border list-item-image"></img>
35+
</div>
36+
<h2 class="store-product-detail-title ">函数式 Swift</h2>
37+
<h3 class="store-product-detail-pricing "><span class='store-product-price'><span class='store-value-money store-value-money-single'>&#65509;69.00</span></span></h3>
38+
<div class="store-product-list-item-description ">
39+
<div class="store-product-list-item-description-short ">
40+
<h3>学习 Swift 函数式编程的核心观点，并将其运用到真实世界的开发中去。</h3>
41+
42+
<p>Swift 为编程世界打开了一扇新的大门，在本书中我们将带领您遨游这个世界。正如 Swift 的创造者 Chris Lattner 所言：</p>
43+
<p>“没有 C 的 Objective-C” 确实是在做减法，但是 Swift 引入了泛型和函数式编程的概念，这极大扩展了语言设计的空间。</p>
44+
<p>在 Swift 中引入函数式编程为我们的开发带来了无限的乐趣。在本书中我们将阐述函数式编程的理念，并向您展示如何在 Swift 中将它们运用于程序设计，这可以帮助我们写出更加简洁和明确的代码。</p>
45+
</div>
46+
</div>
47+
<el-input-number v-model="book2" @change="handleChange" :min=0 style="bottom: 20px; right: 10px; position: absolute;"> </el-input-number>
48+
49+
</div>
50+
<div class="store-product-detail store-product-list-offer-item ">
51+
<div class="store-product-detail-image ">
52+
<img src="https://dxezhqhj7t42i.cloudfront.net/image/a165f416-1d8e-4ff4-a067-f00751aaac22 " height="400 " width="300 " alt=" " class ="img-border list-item-image"></img>
53+
</div>
54+
<h2 class="store-product-detail-title ">Swift 进阶</h2>
55+
<h3 class="store-product-detail-pricing "><span class='store-product-price'><span class='store-value-money store-value-money-single'>&#65509;69.00</span></span></h3>
56+
<div class="store-product-list-item-description ">
57+
<div class="store-product-list-item-description-short ">
58+
<h3>讨论 Swift 特性中从低层级编程到高阶抽象的各个方面的进阶知识</h3>
59+
<p>在本书中，我们涵盖了 Swift 程序设计的一些进阶话题。如果你已经通读 Apple 的 Swift 编程指南，并且想要深入探索关于这门语言的更多内容，那么这本书正适合你！</p>
60+
<p>Swift 非常适合用来进行系统编程，而同时它也能被用于书写高层级的代码。我们在书中既会研究像是泛型、协议这样的高层级抽象的内容，也会涉足像是封装 C 代码以及字符串内部实现这样的低层级话题。</p>
61+
<p>为了确保正确收到我们的邮件，我们强烈建议您<strong>不要使用</strong> QQ 邮箱。</p>
62+
</div>
63+
</div>
64+
<el-input-number v-model="book3" @change="handleChange" :min=0 style="bottom: 20px; right: 10px; position: absolute;"> </el-input-number>
65+
</div>
66+
67+
<div class="store-product-detail store-product-list-offer-item-last ">
68+
<div class="store-product-detail-image ">
69+
<img src="https://dxezhqhj7t42i.cloudfront.net/image/7a3e21cc-96fd-41ec-b226-bc00be79614d" height="400 " width="300 " alt=" " class
70+
="img-border list-item-image"></img>
71+
</div>
72+
<h2 class="store-product-detail-title ">Core Data</h2>
73+
<h3 class="store-product-detail-pricing "><span class='store-product-price'><span class='store-value-money store-value-money-single'>&#65509;69.00</span></span></h3>
74+
<div class="store-product-list-item-description ">
75+
<div class="store-product-list-item-description-short ">
76+
<h3>使用例子为您详解 Core Data 从简单的持久化到多线程及同步等高级应用的最佳实践。</h3>
77+
<p>本书将向您介绍使用 Core Data 时需要特别注意的事项，这将帮助您避开使用 Core Data 这个十分灵活且异常强大的框架时的一些陷阱。我们从一个简单的应用例子开始，逐步将其扩展为包含关系，高级数据类型，并发，同步以及其他很多特性的完整例子，并在这个过程中对所有这些主题进行了讲解。</p>
78+
<p>在本书后半部本，我们还会超出这个基本应用所需要涉及的范围，将我们的知识点深入扩展到 Core Data 幕后的工作原理上。我们会学习如何获取高性能，不同 Core Data 设置之间的权衡，以及如何对你的 Core Data 代码进行调试和性能测试。</p>
79+
<p>本书所有的代码都使用 Swift 书写， 我们也展示了如何将 Swift 的语言特性融入到 Core Data 中，并写出优雅和安全的代码。我们希望您在阅读本书的时候有一定的 Swift 和 iOS 开发基础，不过相信不论是新人还是富有经验的开发者，都能从本书中找到实用的信息和设计模式。</p>
80+
</div>
81+
</div>
82+
<el-input-number v-model="book4" @change="handleChange" :min=0 style="bottom: 0px; right: 10px; position: absolute;"> </el-input-number>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
<h2 class="store-product-detail-title">总价：&#65509;{{this.getTotalPrice}}.00</h2>
88+
89+
<el-button :plain="true" type="success" style="right: 10px; position:absolute;" @click="next">下一步</el-button>
90+
</div>
91+
</div>
92+
</div>
93+
</main>
94+
</div>
95+
</template>
96+
97+
<script>
98+
export default {
99+
data() {
100+
return {
101+
book1: 0,
102+
book2: 0,
103+
book3: 0,
104+
book4: 0,
105+
disable: true
106+
}
107+
},
108+
methods: {
109+
handleChange(value) {
110+
console.log(value)
111+
},
112+
next() {
113+
this.$confirm('😘 请去Objc官网支持 ❤️ 喵神(@onevcat) ❤️', '无法购买', {
114+
confirmButtonText: '支持',
115+
cancelButtonText: '取消',
116+
type: 'info'
117+
}).then(() => {
118+
this.$message({
119+
type: 'success',
120+
message: '请手动前往 https://objccn.io/products/'
121+
})
122+
}).catch(() => {
123+
this.$message({
124+
type: 'info',
125+
message: '已取消购买'
126+
})
127+
})
128+
}
129+
},
130+
computed: {
131+
getTotalPrice() {
132+
return this.book1 * 49 + this.book2 * 69 + this.book3 * 69 + this.book4 * 69
133+
}
134+
}
135+
}
136+
</script>
137+
138+
<style scoped>
139+
.img-border {
140+
border: 1px solid #dadada;
141+
}
142+
.core-window {
143+
position: relative;
144+
}
145+
146+
.store-product-detail-image {
147+
float: left;
148+
}
149+
150+
.store-product-detail-pricing {
151+
display: inline;
152+
}
153+
154+
.store-product-detail-title {
155+
display: inline;
156+
}
157+
158+
@media(max-width:768px) {
159+
.list-item-image {
160+
max-width: 100px;
161+
height: auto;
162+
}
163+
}
164+
165+
.store-product-detail-title {
166+
margin-bottom: 10px;
167+
margin-right: 1em;
168+
font-weight: 600;
169+
line-height: 1.15em;
170+
}
171+
172+
.store-product-detail-description-short {
173+
margin-top: 1em;
174+
}
175+
176+
.store-product-detail-image img {
177+
padding: 0;
178+
margin-right: 1.0em;
179+
}
180+
181+
h2 {
182+
font-size: 1.5em;
183+
margin: .75em 0;
184+
}
185+
186+
h3 {
187+
font-size: 1.2em;
188+
font-weight: 600;
189+
}
190+
191+
.guide {
192+
background-color: #9e9e9e;
193+
border: 1px solid #dadada;
194+
color: #ffffff;
195+
font-size: 1.25em;
196+
font-weight: normal;
197+
max-width: 730px;
198+
padding: 10px 15px;
199+
margin-bottom: 2em;
200+
border-radius: 4px;
201+
-moz-border-radius: 4px;
202+
-webkit-border-radius: 4px;
203+
-khtml-border-radius: 4px;
204+
}
205+
206+
.page {
207+
margin-left: auto;
208+
margin-right: auto;
209+
margin-top: 1em;
210+
max-width: 740px;
211+
padding-left: 10px;
212+
padding-right: 10px;
213+
}
214+
215+
.head {
216+
clear: both;
217+
max-width: 740px;
218+
margin-top: 1em;
219+
}
220+
221+
.content-inner {
222+
max-width: 730px;
223+
margin-left: auto;
224+
margin-right: auto;
225+
background: inherit;
226+
}
227+
228+
.store-product-detail {
229+
position: relative;
230+
line-height: 1.4em;
231+
padding-bottom: 60px;
232+
}
233+
234+
.store-product-detail {
235+
display: inline-block;
236+
}
237+
238+
.core-section-header {
239+
border: 1px solid #dadada;
240+
padding: 0 0 10px;
241+
border-radius: 4px 4px 0px 0px;
242+
-moz-border-radius: 4px 4px 0px 0px;
243+
-webkit-border-radius: 4px 4px 0px 0px;
244+
-khtml-border-radius: 4px 4px 0px 0px;
245+
padding: 10px 15px;
246+
margin-bottom: 0;
247+
background-color: #efefef;
248+
font-size: 1.5em;
249+
font-weight: 600;
250+
margin-top: 0;
251+
}
252+
253+
.core-section {
254+
margin-left: auto;
255+
margin-right: auto;
256+
padding-top: 4px;
257+
margin-top: 1em;
258+
}
259+
260+
.core-section-body {
261+
border: 1px solid #dadada;
262+
margin: 0 0 20px;
263+
padding: 0 0 10px;
264+
border-radius: 0px 0px 4px 4px;
265+
-moz-border-radius: 0px 0px 4px 4px;
266+
-webkit-border-radius: 0px 0px 4px 4px;
267+
-khtml-border-radius: 0px 0px 4px 4px;
268+
padding: 15px;
269+
border-top: none;
270+
}
271+
272+
.store-product-list-offer-item {
273+
position: relative;
274+
padding-top: 20px;
275+
padding-bottom: 50px;
276+
border-bottom: 1px solid #dadada;
277+
}
278+
279+
.store-product-list-offer-item-last {
280+
position: relative;
281+
padding-top: 20px;
282+
padding-bottom: 40px;
283+
}
284+
285+
.store-product-input {
286+
position: absolute;
287+
bottom: 20px;
288+
right: 20px;
289+
}
290+
</style>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.